HTML/CSS sub-submenu

Question

I am having a problem putting a sub-submenu into my html/css designed menu. I have attached a picture of the results that I get from the given code. If someone could point out where I'm making a mistake that would be greatly appreciated. I have looked at everything 2 times over and feel like I'm simply implementing the css incorrectly.

enter image description here

#topbar {
background-color: #222;
}

#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}

#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover ul {
display: block;
}

#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu li {
display: block;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}

#sortsongmenu {
display: in-line;
position: relative;
background-color: #333;
border: 5px solid #222;
border-left: 0;
margin-left: -5px;
}

#sortsongmenu li{
display: inline-block;
}

#sortsongmenu li a:hover {
color: #DB7093;
}

<div id="topbar">
    <div id="topbar_wrapper">
        <ul id="mainmenu">
            <li><a href="#">Home</a></li><li>
            <a href="#">Search</a></li><li>
            <a href="#">Sort By &#9660</a>
                <ul id="sortmenu">
                    <li><a href='#'>Song</a>
                        <ul id="sortsongmenu">
                            <li><a href='#'>A to Z</a></li><li>
                            <a href='#'>Z to A</a></li>
                        </ul>
                    </li><li>   
                    <a href='#'>Artist</a></li><li>
                    <a href='#'>Album</a></li><li>
                    <a href='#'>Genre</a></li><li>
                    <a href='#'>BPM</a></li><li>
                    <a href='#'>Release Date</a></li>
                </ul>
            </li><li>
            <a href="#">Add Song</a></li><li>
            <a href="#">Contant Us</a></li>
        </ul>
    </div>
</div>

@Dominofoe the problem is seems to be that the third tier of the menu is always open when the intent is that it opens when hovering the parent. — Shane Lessard
– Shane Lessard, Commented Jul 29, 2015 at 0:39

Shane Lessard · Accepted Answer · 2015-07-29 00:38:09Z

1

#sortmenu li: hover ul

needs to be:

#sortmenu li:hover ul

Also under #sortsongmenu

display: in-line;

needs to be

display: none;

edited Jul 29, 2015 at 0:38

answered Jul 29, 2015 at 0:32

Shane Lessard

6551 gold badge8 silver badges18 bronze badges

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

5 Comments

Jacob Stinson Over a year ago

I completed the changes suggested and it didn't change anything.

Jacob Stinson Over a year ago

thank you so much. So from what i can gather, not including '>' caused everything from the ul in #mainmenu to show, which resulted in the sub-submenu also showing when hovering over sort by? Is this understanding correct?

Jacob Stinson Over a year ago

also, if i wanted the sub-submenu to appear to the right of the first submenu, how would I do that?

Shane Lessard Over a year ago

The important change was changing "in-line" (which isn't actually a property at all) to "none". There was nothing making your sortsongmenu list from not displaying when not hovering. The rest of the changes were just a bit of cleaning up. I removed a couple of rules that did nothing, and I added the ">" so that the hover effect was only on direct children rather than all descendants.

Shane Lessard Over a year ago

codepen.io/anon/pen/GJwEdv try this for putting the right of the first submenu. I just used position: absolute, top: -5px and left: 100% to align it to the right of the menu's parent list item.

Collectives™ on Stack Overflow

HTML/CSS sub-submenu

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related