CSS Drop-down menu alignment problems

Question

I am having some issues wrapping my head around this problem. Basically I have created a drop down menu and I can't get it to position correctly. I have the background in blue and the menu background in black so you can see how it comes over the bottom of my blue background. I want the black to be centered in the blue as well it would be nice if I could get some help centering the text in the middle of the menu without having to resort to line-height.

Fiddle: http://jsfiddle.net/mzz2u/

HTML

<div id="nav">


<ul id="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Apparel</a></li>
                <li><a href="#">Gloves</a></li>
                <li><a href="#">Punching Bags</a></li>
                <li><a href="#">Protection</a></li>
                <li><a href="#">Accessories</a></li>
            </ul></li>
        <li><a href="#">Wholesales</a>
            <ul>
                <li><a href="#">Equipment Catalogue</a></li>
                <li><a href="#">Wholesale Inqueries</a></li>
            </ul></li>
        <li><a href="#">Contact</a>
            <ul>
                <li><a href="#">Direct Contact</a></li>
                <li><a href="#">YouTube Channel</a></li>
                <li><a href="#">LinkedIn Page</a></li>
                <li><a href="#">Facebook Page</a></li>
            </ul></li>
    </ul>

CSS

#nav {
background-color: #004f99;
height: 40px;
vertical-align: text-middle;
}
#main-nav,
#main-nav ul {
list-style: none;
}
#main-nav {
float: left;
background-color: #000000;
}
#main-nav > li {
float: left;
height: 40px;
}
#main-nav li a {
display: block;
width: 100px;
height: 40px;
line-height: 2.0em;
text-decoration: none;
}
#main-nav ul {
position: absolute;
display: none;
z-index: 999;
}
#main-nav ul li a {
width: 150px;
}
#main-nav li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#main-nav {
font-family: Arial;
font-size: 12px;
background-image: url('../images/menubg.jpg');
}
#main-nav > li > a {
color: #ffffff;
font-weight: bold;
}
#main-nav > li:hover > a {
color: #888888;
background-color: #ff0000;
}

/* Submenu
------------------------------------------*/
#main-nav ul {
background-color: #111111;
}
#main-nav ul li a {
color: #ffffff;
}
#main-nav ul li:hover a {
background: #888888;
}

Cristian Rojas · Accepted Answer · 2013-05-12 15:12:58Z

2

Lets take a look of what I did in the following fiddle:

http://jsfiddle.net/mzz2u/1/

Basically I've removed vertical-align: text-middle; from #nav and stablished display: block; text-align: center; to keep it full width and align to center the wrapped nav, then in the ul nav I've put display: inline-block; to assign only neccesary auto-width and float: none; margin: 0 auto; to center into the parent.

I hope this helps you, be careful when using display properties, most time for common elements and works you should use block, inline-block, none but for some tricks around the web you may be use the other possibilities.

Edit: If you want to center the content of the link without having to set line-height: 40px lets add vertical-align:middle; display: table-cell; to "a" element inside "li"

edited May 12, 2013 at 15:12

answered May 12, 2013 at 15:06

Cristian Rojas

2,9027 gold badges37 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sam · Accepted Answer · 2013-05-12 15:08:47Z

0

http://jsfiddle.net/tVAGw/

Real easy to center the text if you're not stuck on it being 40px. The problem with alignment was the default padding on #main-nav ul

answered May 12, 2013 at 15:08

Sam

3135 silver badges17 bronze badges

Comments

HEDMON · Accepted Answer · 2013-05-12 15:25:39Z

0

Basically: http://jsfiddle.net/p7q87/

What I did:

++ #main-nav {margin: 0;}
++ #main-nav li a { position: relative; top: 50%; margin-top: -12px;

answered May 12, 2013 at 15:25

HEDMON

74710 silver badges24 bronze badges

Comments

bethabernathy · Accepted Answer · 2016-07-07 20:58:14Z

0

This worked for me as well:

.navbar-right .dropdown-menu{right:0;left:0}

at:

http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html

answered Jul 7, 2016 at 20:58

bethabernathy

532 silver badges9 bronze badges

Collectives™ on Stack Overflow

CSS Drop-down menu alignment problems

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related