user2627240
Reputation: 355
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.
Upvotes: 2
Views: 3528
Answers (2)
rafaelcastrocouto
Reputation: 12161
HTML
<div id="menu-container">
<ul id="menu">
<li><span>Home</span></li>
<li><span>Test-L1A</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>
<li><span>Test-L2A</span></li>
</ul>
</div>
CSS
#menu-container * {
float: left;
display: inline-block;
padding: 0; margin: 0;
list-style:none;
position: relative;
}
#menu-container span {
cursor:pointer;
background: #ccc;
padding: 6px;
margin: 6px;
overflow: hidden;
white-space: nowrap;
}
#menu ul {
position: absolute;
}
/*first level*/
#menu > li > ul {
left: 0;
top: 100%;
}
/*other levels*/
#menu > li > ul > li ul {
left: 100;
top: 0%;
}
/*hide and show on hover*/
#menu li > ul li {
display: none;
}
#menu li:hover > ul > li {
display: block;
}
Demo: http://codepen.io/anon/pen/tBxwK
Upvotes: 0
Nitesh
Reputation: 15779
Here you go.
SOLUTION 1: BY MANUALLY ADDING POSITION RELATIVE TO THE LI ELEMENT
The 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 class="levelThreeAlign"><span>Test-L2B</span>
<ul>
<li><span>Test-L3A</span></li>
<li><span>Test-L3B</span></li>
</ul>
</li>
<li class="levelThreeAlign"><span>Test-L2C</span>
<ul>
<li><span>Test-L3C</span></li>
<li><span>Test-L3D</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The 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;
}
.levelThreeAlign{position:relative;}
SOLUTION 2 : BY CREATING A CSS INHERITANCE TYPE IN THE STYLESHEET WITH A POSITION RELATIVE
The 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>
The 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 > li{position:relative;}
#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;
}
Hope this helps.
Upvotes: 3