Question

I tried with various settings for display and position but I don’t know how to arrange the subitems in my future dropdown menu. They overlap with the other menuitems and don’t stay in place where they should. Unfortunately even this question + answer couldn’t help me.

This is my CSS code:

#menu ul li a {
text-decoration: none;
background-color: #FF0000;
font-size: 16px;
margin: 10px 5px 10px 5px;
display: block;
float: left;
position:relative; }

#menu ul li a:hover {
background-color: #0000FF; }

#menu ul li ul li a {
clear: left;
background-color: #6F0;
font-size: 10px;
display: block;
position: absolute; }

I tried combined selectors like these

#menu ul li a + #menu ul li ul li a { }

li.page_item > li.page_item { }

but they did not work either.

Edit:
Here is some HTML/PHP code. It’s a wordpress template, now I think I should have mentioned that before …

            <div id="menu" role="navigation">
            <?php /* Navigation menu. */ ?>
            <?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu-class',
                                    'container_id' => 'main-menu-id', 'theme_location'  => 'header', 'show_home' => true)); ?>
        </div> <!-- menu -->

And the rendered HTML code is:

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

Answer 1

I’ve made some changes to your CSS to fix the overlap issues.

#menu ul li a {
  float: none; /* no need for float */
}

#menu ul li ul li a {
 position: static; /* no need for absolute positioning here */
}

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

.menu li ul {
 position: absolute; 
}

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

And here’s a demo: http://jsbin.com/aloreh/1/edit

Your general problem is that you’re putting position: absolute and position: relative on the wrong things. It’s good that you’re applying all your link styling to the actual link elements, but you need to apply the positioning to the lists and the list items.

So, the first level list items need to have position: relative. This allows submenus to be positioned relative to the first level items. Then the submenu uls will have position: absolute so that they don’t reflow the page when they appear on hover.