HTML/CSS: show submenu next to parent MENU, not parent item

Question

I have a three-level navigation, the third level (sub-submenu) displays when hover on the second one (submenu).

The sub-submenu appears relative to the parent item. But I want it to appear simply next to the submenu, so always on the same place, regardless which submenu-item gets hovered. So the first item of the sub-submenu (e.g. "Second-One") is always on the same height as the first item of the submenu ("First")

Here is a JSFiddle for my actual status: http://jsfiddle.net/fc0rwbqu/

Thanks in advance!

Code:

<ul id="nav">
<li>Home</li>
<li>Numbers
    <ul>
        <li>First
            <ul>
                <li>First-One</li>
                <li>First-Two</li>
                <li>First-Three</li>
            </ul>
        </li>
        <li>Second
            <ul>
                <li>Second-One</li>
                <li>Second-Two</li>
                <li>Second-Three</li>
            </ul>
        </li>
        <li>Third
            <ul>
                <li>Third-One</li>
                <li>Third-Two</li>
                <li>Third-Three</li>
            </ul>
        </li>
    </ul>
</li>

CSS:

#nav {
position: relative}

#nav li a,#nav li { float:left;
margin-left: 20px;
background-color: #ddd;}

#nav li {
list-style:none;
position:relative;}

#nav li ul {
display:none;
position:absolute;
left:0; width: 100px;
top:90%;
padding:0;
margin:0;}

#nav li:hover > ul {
display:block;}

#nav li ul li {
float:none;
height: 35px;
min-width: 100px; 
line-height: 35px;
border-right: 0;
display:block;}

#nav li ul li ul {
display:none; margin: 0 0 0 10px; 
width: 100px; z-index:9999; 
float: left !important; overflow: display; 
background-color: #f06;}

#nav li ul li:hover ul {
left: 100px;
top:0;}

sergolius sergolius · Accepted Answer · 2014-12-22T11:28:16

0

votes

Something like this?? http://jsfiddle.net/fc0rwbqu/1/ Appled position: relative to ul tag.

HTML/CSS: show submenu next to parent MENU, not parent item

1 Answers