Drop downs not working

HTML & CSS
1

hi,
i am working on a menu and the 2nd menu’s 2nd row is child of the first menu but its not showing as a drop down. but as seen on the website. wht can be wrong? i checked in menu. its child of other page

2

w/o going into the code specifically, I’d say you aren’t giving the LI ULs position:absolute; AND you aren’t hiding them ( I like to position mine off screen as it’s more accessible, but some an older method was to give the element display:none; )
So essentially you need to have something similar to the following in your CSS:

#nav >li {position:relative; }
#nav li ul {position:absolute; left:-9999em; top:100%}
#nav li:hover ul {position:absolute; left:auto;}

3

wasn’t that is by defult behaviour of wordpress child menu when place under parents?

4

There is no default behavior in WP. It all depends on which theme you are using,as well as how you chose to alter said theme. Remember CSS cascades, and overrides. The 2010 theme, for example, as a working VERTICAL drop down MAIN menu in it. but if you dont use 2010 or chose to alter it then all bets are off.

5

Hi dresden,

If I remember correctly using left:auto has the potential to cause problems with IE7 as it has to guess where to place the sub ul. The problem usually occurs when text-align:center is used on the parent ul/li. Then IE7 will center the left edge of the sub ul in it’s attempt to guess what left:auto is.

I’ve always had much better results using a negative margin for x-browser code.


#nav li {
    position:relative;/* set containing block for AP sub ul */
}
#nav li ul {
    position:absolute;
    left:0;
    top:100%;
    margin-left:-999em;/* hide the sub ul */
}
#nav li:hover ul {
    margin-left:0;/* reveal the sub ul on li:hover */
}
6

As others have said you will need something roughly like this.


#menu-main-menu-2{position:relative;}
#menu-main-menu-2 li{
background-position:0 12px;
position:relative!important;
}

#menu-main-menu-2 ul{
position:absolute;
margin-left:-999em;
left:0;
width:auto;
}
#menu-main-menu-2 li:hover ul{
margin-left:0;
}
#menu-main-menu-2 ul li{white-space:nowrap;background:none}
#menu-main-menu-2 ul li a:hover{background:none}

You also need to sort out your ul id="nav as that is badly constructed and should be a div unless you want to nest another list element to hold the content.