Monday, 9 September 2013

CSS Dropdown 3rd level Menu Issue

CSS Dropdown 3rd level Menu Issue

I have an issue in displaying the 3rd level in a dropdown menu. The 3rd
level is not aligning properly with their 2nd level parent. If you click
on any parent the third level starts at top. Offcourse it may be because
of absolute posistioning and having top:0. I tried to change the
positioning to relative but the parent menu item in focus expands.
Changing value for Top attribute also doesnt help. I am unable to find a
alternate css which is as simple as that the one I found.
HTML
<div id="menu">
<ul id="menu">
<li><span>Home</span></li>
<li><span>Test-L1</span>
<ul>
<li><span>Test-L2A</span></li>
<li><span>Test-L2B</span>
<ul>
<li><span>Test-L3A</span></li>
<li><span>Test-L3B</span></li>
</ul>
</li>
<li><span>Test-L2C</span>
<ul>
<li><span>Test-L3C</span></li>
<li><span>Test-L3D</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
* {
list-style:none;
margin:0;
padding:0;
font-size:1em;
cursor:pointer;
}
#menu{
margin:3px;
}
#menu > li{ /* Top Level */
float:left;
margin-right:3px;
}
#menu > li > span{
display:block;
background:#55aa7f;
padding:3px 10px;
}
#menu > li:hover > span{
color:#fff;
}
#menu > li > ul{ /* Second Level */
display:none;
background:#55aa7f;
}
#menu > li:hover > ul{
display:block;
position:absolute;
}
#menu > li > ul > li > span{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
color:#fff;
}
#menu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#55aa7f;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}
Jsfiddle http://jsfiddle.net/85sZy/
I have tried in IE9 and Chrome v29. If it is not possible to achieve the
result with the above css, please provide me a alternate css which will
serve the purpose.Still I prefer corrected version of above css.

No comments:

Post a Comment