1. Home
  2. Forums Index
  3. Browser Side / CSS 8:00 am May 21, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Can't align dropdown menus with parent menu or center menus

CSS dropline menu with dropdowns

         

Dopey newbie

3:18 am on Dec 15, 2011 (gmt 0)

10+ Year Member



I have a Three level menu with dropline menu bar for first and second level and dropdowns for third level but I cannot left align the dropdown with their parent (2nd level menu-bar)

I cannot style dropdowns individually as site will eventually need to cater for multiple languages with menu and list items of differing widths on some pages.

I would also dearly love all menus(except drop-downs) to be centered, is this even possible if list items are not fixed width?

Please help:

Using: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Here is html: 


<body>
<div id="wrapper">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Free Downloads</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option3</a></li>
</ul>
</li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Option 1</a></li>
</ul>
</li>
<li><a href="#">Product 3</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</li>
<li><a href="#">Product 4</a></li>
<li><a href="#">Product 5</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</li>
<li><a href="#">Product 6</a></li>
<li><a href="#">Product 7</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Latest News</a></li>
<li><a href="#">News by Theme</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Columns</a></li>
</ul>
</li>
</div>
</div>
</body>


and here is css: 

#wrapper {
width: 985px;
padding: 0px;
min-height: 200px;
_height: 200px; /* Internet Explorer fix*/
margin-top: 0px;
margin-left:auto;
margin-right:auto;
text-align: left;
background-image:url(images/3levelmenu.jpg);
background-repeat: repeat-x;
}

ul#nav {
display:inline;
width:15px;
list-style: none;
margin: 0;
padding:0;
border-bottom: 1px solid #ccc;
}

ul#nav li {
display: inline; /*makes 2nd level list display horizontally*/
margin: 0px;
padding-top: 0px;
padding-left: 0; /*this must be included or will not display properly in Firefox*/
}

ul#nav li a {
float: left; /*ensures that 2nd level menu bar appears directly under parent*/
line-height: 30px;
color: #FFF;
background:none; /* addresses IE6 Bug */
border:none;/* addresses IE6 Bug */
text-decoration: none;
/* styling of top level menu bar */
padding-top: 0px;
padding-left: 20px;
padding-right: 20px;
font-size: 1em;
font-family: arial, verdana, tahoma, sans-serif;
}

ul#nav li:hover > a {
 height: auto;
 color: #000;
 text-decoration: none;
 background-color: #FFC; /*background hover color/image*/
 opacity:0.8;
 filter:Alpha(Opacity=80);/* IE7 and under */
-ms-filter: "Alpha(Opacity=40)"; /* IE8 */ 
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left:20px;
 padding-right: 20px; /*hover padding must match padding for > a list items to avoid flicker from inconsistentcies in margins*/
 margin-left: 0px;
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav ul {
 display: none;
 padding: 0px;
 margin-left: 0px;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
 position: absolute; /*ensures menu bar remains fixed and does not scroll*/
 margin-top: 30px;
 margin-left: 0px;
 padding:0;}

ul#nav li:hover > ul li a {
 font-size: 0.9em;
 font-family: arial,verdana,tahoma,sans-serif;
 line-height: 30px;
 color: #000;
 text-decoration: none;
 margin-left: 0px;
 margin-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left: 15px;
 padding-right: 15px; /* padding between items on 2nd level menu*/
 text-align: left;
}

ul#nav li:hover > ul li a:hover {
 color: #000;
 text-decoration: none;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left: 15px;
 padding-right: 15px;
 margin-left: 0;
}
 
/* APPLIES THE ACTIVE STATE */
ul#nav li:hover > ul li:hover a {
 color: #000;
 text-decoration: none; 
margin-top: 0px;
margin-left: 0px;
 padding-left: 15px;
 padding-right: 15px;}

/* WHEN THE SECOND LEVEL MENU ITEM IS HOVERED, THE SECOND CHILD MENU APPEARS */

ul#nav li:hover > ul ul {
 width: 100px;
 display: none;
 margin-left: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left: 15px;
 padding-right: 15px;
 margin-top: 0px;
}
ul#nav li:hover > ul li:hover ul {
 width: 100px; /*dropdown width to accomodate largest list item*/
 display: inline-block; /*positions dropdown relative to parent menu*/
 padding-top: 5px;
 margin-top: 30px;
 background-color: #D7EEF7; /*background-color for dropdown*/
 
}

ul#nav li:hover > ul li:hover ul li a {
width: 100px; /* needs to match width of dropdown for consistent display when hovered */
font-size: 0.8em;
 font-family: arial,verdana,tahoma,sans-serif;
 padding: 0;
 color: #000;
 text-decoration: none;
}

ul#nav li:hover > ul li:hover ul li a img{
padding-right:0px;
padding-bottom:0px;}

ul#nav li:hover > ul li:hover ul li a:hover {
 color: #000;
 text-decoration: none;
}
 
 /* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul#nav li:hover ul, li.over ul {display: block;} /*IE Fix*/


Please help!

alt131

10:02 pm on Dec 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Dopey newbie, and welcome to WebmasterWorld.

I've included some sample code below, but there is a bit going on in the code provided, so I'd suggest you consider a few things before we get to that.
  1. Try to keep code simple - use shorthand, and avoid setting properties that are inherited. Best practise is to avoid hacks.
  2. Decide which browser versions you intend to support. For example, the menu uses :hover on the <li> to hide/show the sub-menus plus uses the _underscore hack to give the wrapper a height. ie6 doesn't understand :hover on anything but <a> and the wrapper will expand anyway, which means the code uses a hack to target a browser version even thoguh not required, while depending on coding techniques that mean the menu won't function.
  3. position:absolute is any easy way to remove the sub-menus from the flow so they do not occupy "space" in the document and "push" the other menu items across. Use position:fixed to "fix" elements so they do not scroll with the document. It is quite possible to "fix" the menu if you want, but the code will need to be adjusted as it changes the positioning of the sub-menus.
  4. I'm not quite sure what you mean by "centring" the menus. If you mean centre the text, use text-align:center (rather than text-align:left on the div#wrapper), then text-align:left for the drop-down. (Which is what the following code does). If that's what was desired, consider is it is easier for users to read a menu if the alignment is the same for every item.
  5. Some assistive devices don't read the content of elements with display:none, so safer to use visibility:hidden/visible to hide/show the menu items.
Ok, back to code. Note design features like font styles and opacity have been stripped out to make it easier to focus on the menu code itself, and it is a quick write so could be further improved. I've also used float to keep the code as simple as possible, even though some of the newer properties would work just as well. Hopefully the notes explain what is required, and there is more information about how and why this works in SuzyUK's posts in Drop Down menu with images [webmasterworld.com] and z-index for Drop down Menu [webmasterworld.com]


#wrapper {
width: 985px;
padding: 0;
min-height: 200px;
margin: 0 auto;
}

ul#nav {
border-bottom: 1px solid #ccc;
height:30px;
}

/*Group common properties*/
ul {
list-style:none;
margin:0;
padding:0;
}

ul#nav li {
float:left;
}

ul#nav a {
height: 30px;
line-height:30px;
display:block;
text-decoration: none;
padding: 0 20px;
text-align:center; /*centres text*/
}

/*Colour all hovered links, and keep menu item coloured when hovering sub-menu*/
li:hover > a {
background-color: #FFC;
}

/*Hide the sub-menus and align them with the menu item*/
ul#nav li ul {
visibility:hidden;
position:absolute;
}

/*Make 2rd sub-menu visible and display as a drop-line*/
ul#nav > li:hover > ul > li {
width: 120px;
background-color: #D7EEF7;
visibility:visible;
float:left;
position:relative; /* fixes hiding the drop-line*/
}

/*Make 3rd sub-menu visible and display as a drop-down*/
ul#nav > li > ul > li:hover ul li {
width: 120px;
background-color: #D7EEF7;
visibility:visible;
float:none;
}

/*left-align 3rd level drop-down*/
ul#nav > li > ul > li:hover ul li a {
text-align:left;
}

Dopey newbie

12:52 am on Dec 18, 2011 (gmt 0)

10+ Year Member



Thanks so much for your response and for neatening up my messy code. I kept adding to it to try to get it working, in future I'll strip it down to try and get it working. This was far too ambitious for a newbie's first project but at least I feel that I have learnt a lot.
I have changed my code to the way you have written it and it works, but I have removed the width tag from the following section so that the second level dropline displays horizontally.

<code>
/*Make 2rd sub-menu visible and display as a drop-line*/
ul#nav > li:hover > ul > li
{
width: 120px;
</code>

The only problem is that I need the second level to be fixed and only the third level to align with its parent. If the second level aligns with its parent also then I have half the menu wrapping to the side of the screen as I hover over items on the right hand side of the menu.

Any idea how I do this while keeping the dropdowns, (3rd level) left-aligned to their parent?

And by centering, I meant the menu text <ul> relative to it's container <div>. I have tried margins auto and other methods suggested in various places, without success. Many of these require that list items are a fixed width and that will not work in this example.
Thanks again for your help!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 8:00 am May 21, 2026