CODEWITHSUNDEEP
cssdrop-down-menu
Infinity
Infinity

Reputation: 307

CSS Drop Down Menu, Nested Lists - Child List Items Overlap Parent List Items

I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.

I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.

Why does this happen and what is the solution?

HTML Code

<ul id="navigation_2">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
     <ul>
        <li>Who We Are</li>
        <li>Our Goal</li>
    </ul>
  </li>
</ul>

CSS Code

ul#navigation_2 
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}

Upvotes: 0

Views: 5776

Answers (1)

LukeGT
LukeGT

Reputation: 2352

Here, I have a working example:

http://jsfiddle.net/hzCZY/2/

Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.

If you need any more explanation I'd be more than happy to help.

Upvotes: 2

Related Questions