Dropdown links outside the navbar and it's items not centered-CodePudding

I'm trying to do a navigation bar but not all the links stay at the same level, the drop down menu ones stay outside the navigation bar div and I can't align them.

Also, the container that has the drop down menu links isn't centered right bellow the drop down link. I don't know how I can center it.

.topnav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #333;
}

.topnav a {
    color: #f2f2f2;
    padding: 10px;
    text-decoration: none;
    text-align: center;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

<div >

    <a href="#">Link 1</a>
    <a href="#">Example link</a>

    <div >
        <a href="#">Dropdown menu 1</a>
        <div >
            <a href="#">Link 2</a>
            <a href="#">An example link</a>
            <a href="#">Link 3</a>
        </div>
    </div>


    <div >
        <a href="#">Dropdown menu 2</a>
        <div >
            <a href="#">Link 4</a>
            <a href="#">Link 5</a>
            <a href="#">An example link 2</a>
        </div>
    </div>

</div>

CodePudding user response：

Just Add This Code In -> .topNav

align-items: center;

CodePudding user response：

Try adding this:

.dropdown a {
  display:flex;
}

and your item element with a drop down should get aligned in the same space.

Update 1

You might need to set a fixed width on the submenu in order to keep it centred, like the following:

.dropdown-content {
    left: -80px;
    margin-left: 50%;
}

.topnav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #333;
}

.topnav a {
    color: #f2f2f2;
    padding: 20px;
    text-decoration: none;
    text-align: center;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown a {
  display:flex;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    left: -80px; /* 160px/2 */
    margin-left: 50%; /* 50% */

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

<div >

    <a href="#">Link 1</a>
    <a href="#">Example link</a>

    <div >
        <a href="#">Dropdown menu 1</a>
        <div >
            <a href="#">Link 2</a>
            <a href="#">An example link</a>
            <a href="#">Link 3</a>
        </div>
    </div>


    <div >
        <a href="#">Dropdown menu 2</a>
        <div >
            <a href="#">Link 4</a>
            <a href="#">Link 5</a>
            <a href="#">An example link 2</a>
        </div>
    </div>

</div>