Question

I try to create a dropdown menu with CSS for a WordPress template. When I hover a menuitem (e.g. “Cupcake Ipsum” like you can see on the picture), the whole menu is displayed in a weird way.

I hope the picture is self-explanatory enough. The menuitem “Cupcake Ipsum” is hovered on the bottom view of the menu:

My HTML code (from firebug) is:

<div id="menu" role="navigation">
<div class="menu">
<ul>
<li class="current_page_item">
<a title="Home" href="http://whatever.com/wordpress/">Home</a>
</li>
<li class="page_item page-item-40">
<a href="http://whatever.com/wordpress/?page_id=40">Cupcake Ipsum</a>
<ul class="children">
<li class="page_item page-item-388">
<a href="http://whatever.com/wordpress/?page_id=388">Red Velvet Cupcake</a>
</li>
<li class="page_item page-item-390">
<a href="http://whatever.com/wordpress/?page_id=390">Mango Cupcake</a>
</li>
<li class="page_item page-item-392">
<a href="http://whatever.com/wordpress/?page_id=392">Chocolate Cupcake</a>
</li>
</ul>
</li>
<li class="page_item page-item-43">
<a href="http://whatever.com/wordpress/?page_id=43">Bacon Ipsum</a>
<ul class="children">
<li class="page_item page-item-405">
</ul>
</li>
<li class="page_item page-item-45">
<a href="http://whatever.com/wordpress/?page_id=45">Veggie Ipsum</a>
<ul class="children">
<li class="page_item page-item-397">
<a href="http://whatever.com/wordpress/?page_id=397">Tomato</a>
</li>
<li class="page_item page-item-399">
<a href="http://whatever.com/wordpress/?page_id=399">Lettuce</a>
</li>
<li class="page_item page-item-401">
<a href="http://whatever.com/wordpress/?page_id=401">Broccoli</a>
</li>
<li class="page_item page-item-403">
<a href="http://whatever.com/wordpress/?page_id=403">Onion</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

My CSS code is:

#menu ul li a {
text-decoration: none;
color: #CCCCCC;
font-size: 16px;
padding: 10px;
display: block;
position:relative;
}

#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}

#menu ul li ul li a {
clear: left;
line-break: strict;
background-color: #006699;
padding: 5px;
font-size: 10px;
}

#menu ul li ul li {
display: block;
float: none;
clear: left;
}

.menu ul li {
display: inline-block;
position: relative;
}

.menu li ul {
position: absolute;
}

.menu li:not(:hover) ul {
display: none; 
}

I want to create a dropdown menu where one subitem is below the other. Tried a lot but I cannot manage to arrange the subitems correcly.

Answer 1

What did you omit? Your exact code in this fiddle works, check your css, you have something overriding some of your rules, check each element, see when the rules you pasted here are overwritten.