issue with multi-level css drop down menu

Question

demo

I've tried but third level menu problem with two > 2 > a not showing at right is not getting drop down menu?

#header-menu ul.menu li {
display: block;
position: relative;
float: left;
}
#header-menu ul.menu li a{
    padding: 10px !important;
}
#header-menu li ul {
display: none;
}
#header-menu ul.menu li a {
/*white-space: nowrap;*/
}
#header-menu ul.menu li > ul a{
    margin: 0;
    padding: 10px !important;
    display: block;
}
#header-menu ul.menu li a:hover {
/*background: #617F8A;*/
color: #0B6AAD;
}

#header-menu li:hover > ul {
display: block;
position: absolute;
top: 22px;
left: 0;
width: 250px;
/*display: table;*/
margin: 0;
padding: 0;
/*border: 6px solid #666666;
border-radius: 12px;
box-sizing: border-box;*/

}
#header-menu li:hover li {
float: none;
font-size: 11px;
}
#header-menu li:hover a {
background: #617F8A;
}
#header-menu li:hover li a:hover {
/*background: #95A9B1;*/
}
#header-menu ul.menu ul li a{
    border-bottom: 1px dashed #666666;
}
#header-menu ul.menu ul li:last-child a{
    border-bottom: none;
}
#header-menu ul.menu ul li:hover > ul{
    position: absolute;
    right: -250px;
    top: 0;
    width: 250px;
    display: inline;
}

Please note: I couldn't edit the html markup.

If you can't edit the html, you can follow the rules that I have added in ul.sub_menu and places it in a css rules. Remember to edit the right propriety in the #header-menu ul.menu ul li:hover > ul rule — damoiser
– damoiser, Commented Sep 1, 2013 at 12:35

damoiser · Accepted Answer · 2013-09-01 12:10:40Z

1

I have found a possible solution to your problem:

Add a class to the ul sub-menu:

    <ul class="sub_menu">
        <li><a href="#">a not showing at right</a></li>
        <li><a href="#">b</a></li>
        </ul>
    </li>

Add this css:

ul.sub_menu {
 left: 250px;
 top: 0px;
 display: block;
 position: absolute;
 width: 200px;
 z-index: 1000;
}

And modify your css rule:

#header-menu li:hover > ul {
display: block;
position: absolute;
left: 250;
width: 250px;
/*display: table;*/
margin: 0;
padding: 0;
/*border: 6px solid #666666;
border-radius: 12px;
box-sizing: border-box;*/

}

Remove this rule:

#header-menu ul.menu ul li:hover > ul{
    position: absolute;
    right: -250px;
    top: 0;
    width: 250px;
    display: inline;
}

Maybe with a jsFiddle is more comprehensive ;) : http://jsfiddle.net/damoiser/6ax6s/2/

edited Sep 1, 2013 at 12:10

answered Sep 1, 2013 at 12:04

damoiser

6,2763 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Navin Rauniyar · Accepted Answer · 2013-09-01 12:15:59Z

0

Replace your right: -250px; with left: 250px; it works fine. demo

answered Sep 1, 2013 at 12:15

Navin Rauniyar

10.6k14 gold badges47 silver badges70 bronze badges

Collectives™ on Stack Overflow

issue with multi-level css drop down menu

demo

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related