Linked Questions

Popular Questions

Dropdown Menu Text Not Aligning Center On All Dropdowns

Asked by At

Correct Alignment:

Correct Alignment

Incorrect Alignment:

Incorrect Alignment

I am trying to align the text of my dropdown menus. Some of them are centered, others are not. Not sure where the problem is. Some help would be appreciated.

I've tried going into .sub-menu li a{} and centering it there but that hasn't worked. I also tried center aligning in every other section but nothing is changing those dropdown links


<nav class="menu-bar">
        <li class="sub-menu-parent" tab-index="0">
            <a class=active href="index.html">Home</a>
        <li class="sub-menu-parent" tab-index="0">
            <a href="todo.html">Blog</a>
            <ul class="sub-menu">
                <li><a href="todo.html">Cat</a></li>
                <li><a href="todo.html">Blog</a></li>
                <li><a href="todo.html">Dog</a></li>
        <li class="sub-menu-parent" tab-index="0">
            <a href="todo.html">Shop</a>
            <ul class="sub-menu">
                <li><a href="todo.html">Lenses</a></li>
                <li><a href="todo.html">Cases</a></li>
                <li><a href="todo.html">Travel</a></li>
                <li><a href="todo.html">Cleaning</a></li>
                <li><a href="todo.html">Extras</a></li>
        <li class="sub-menu-parent" tab-index="0">
            <a href="todo.html">Login</a>
            <ul class="sub-menu">
                <li><a href="todo.html">Exsisting Member</a></li>
                <li><a href="todo.html">New Member</a></li>
        <li class="sub-menu-parent" tab-index="0">
            <a href="todo.html">Contact</a>
            <ul class="sub-menu">
                <li><a href="todo.html">Customer Service</a></li>
                <li><a href="todo.html">FAQ</a></li>


.sub-menu-parent {
position: relative;
font-family: 'Major Mono Display';
text-transform: lowercase;
background-color: black;

.sub-menu {
visibility: hidden;
/* hides sub-menu */
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0.3s linear 0.3s, z-index 0s linear 0.01s;

.sub-menu-parent:focus .sub-menu, .sub-menu-parent:focus-within .sub-menu, 
.sub-menu-parent:hover .sub-menu {
visibility: visible;
/* shows sub-menu */
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;


body {
padding: 2%;
font-size: 125%;

.menu-bar a {
color: rgb(255, 255, 255);
display: block;
padding: 20px 80px;
text-decoration: none;
border: 1px solid white;

.menu-bar a:hover {
color: rgb(0, 0, 0);
background-color: white;
transition: ease-in 0.3s;

.menu-bar ul, .menu-bar ul li {
list-style-type: none;
padding: 0;
margin: 0;

.menu-bar>ul {
background: transparent;
text-align: center;

.menu-bar>ul>li {
display: inline-block;
border-left: solid 1px #aaa;

.menu-bar>ul>li:first-child {
border-left: none;

.sub-menu li a{
background: rgb(207, 207, 207);
color: black;


.active {
background-color: rgb(80, 80, 80)

Related Questions