Question

I’m in the process of creating a WordPress theme for a non-profit and I’d like to be able to create dropdown menus for them. However for some reason, the dropdowns do not line up with the parent page item, i.e. I set the item ‘Resources’ as having ‘About’ about for a parent page and when you hover over About, the Resources tab is not lined up under About. Hope this makes sense.

Here is the code.

The HTML

<div id="nav">
<div class="menu">
<ul>
<li class="current_page_item"><a href="http://localhost/raf/" title="Home">Home</a></li>

<li class="page_item page-item-8"><a href="http://localhost/raf/?page_id=8">News</a>

<ul class='children'>
<li class="page_item page-item-75"><a href="http://localhost/raf/?page_id=75">And Yet Another</a></li></ul></li>

<li class="page_item page-item-12"><a href="http://localhost/raf/?page_id=12">About</a>
<ul class='children'><li class="page_item page-item-70"><a href="http://localhost/raf/?page_id=70">Dropdown Menu</a></li>
<li class="page_item page-item-73"><a href="http://localhost/raf/?page_id=73">Another Dropdown</a></li></ul></li>

</ul></div>
</div><!--End #nav-->

And the CSS…

#nav ul ul {
display: none;
position: absolute;
top: 38px;
left: 0;
height:20px;
float: left;
width: 190px;
z-index: 99999;         
}

#nav ul ul a {
color:#555;
font-size:12px;
border: 1px solid #ddd;
}

#nav ul ul li {
top:0;
min-width: 180px;
background-color:#333;
}

#nav ul ul ul {
left: 100%;
top: 0; 
}

#nav ul ul a {
font-size:12px;
background: #e5e5e5;
line-height: 1em;
padding: 15px;
width: 160px;
height: 10px;
}

Thanks a heap! Hope someone can help with this.

jrw

Answer 1

I found out that my problem was that I needed to add position:relative to the parent elements, i.e. the list items in the parent ul. Thanks to everyone who took time to try and help me out!