CODEWITHSUNDEEP
css
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

issue with multi-level css drop down menu

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.

Upvotes: 1

Views: 400

Answers (2)

Navin Rauniyar
Navin Rauniyar

Reputation: 10525

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

Upvotes: 0

damoiser
damoiser

Reputation: 6238

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/

Upvotes: 1

Related Questions