CSS menu, display subnav on hover

Question

I made a custom mini navigation on a site I am working on, I need the subnav to display on hover just as I have it display on the category or page it is currently on but have not been able to select that properly.

It is the small navigation on the right with the radio/tv/contests/blog icons Link: http://www.getconnectedmedia.com/wp/?post_type=radio

I thought this would work, but it doesn't

ul#mininav li#mntv a:hover ul#minisubnav li#subtv {
    display:inline !important;
}

Here is the code so far:

<ul id="mininav">
    <li id="mnradio"><a href="http://www.getconnectedmedia.com/wp/?post_type=radio">radio</a></li>
    <ul id="minisubnav">
        <li id="subradio">RADIO</li>
    </ul>
    <li id="mntv"><a href="http://www.getconnectedmedia.com/wp/?post_type=gctv">tv</a></li>
    <ul id="minisubnav">
        <li id="subtv">TV</li>
    </ul>
    <li id="mnblog"><a href="http://getconnectedmedia.com/wp/?cat=2">blog</a></li>
    <ul id="minisubnav">
        <li id="subblog">BLOG</li>
    </ul>
    <li id="mncontests"><a href="http://www.getconnectedmedia.com/wp/?post_type=contests">contests</a></li>
    <ul id="minisubnav">
        <li id="subcontests">CONTESTS</li>
    </ul>
    <li id="mnarchives"><a href="http://getconnectedmedia.com/wp/?page_id=108">archives</a></li>
    <ul id="minisubnav">
        <li id="subarchive">ARCHIVES</li>
    </ul>
    <li id="mnabout"><a href="http://getconnectedmedia.com/wp/?page_id=119">about</a></li>
    <ul id="minisubnav">
        <li id="subabout">ABOUT</li>
    </ul>
</ul>

CSS:

ul#mininav li {
    display: block;
    float: left;
    margin: 0 0 0 0px !important;
}

ul#mininav li a {
    display: block;
    outline: none;
    width: 30px;
    height: 30px;
    background: transparent url(images/mininav/mininav.png) no-repeat 0 0;
    text-indent: -9009px;
    margin: 0 4px 0 0;
}

ul#mininav li#mnradio a {
    width: 30px;
    background-position: 0px 0px;
}

ul#mininav li#mnradio a:hover {
    width: 30px;
    background-position: 0px -31px;
}

.post-type-archive-radio ul#minisubnav li#subradio {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -40px;
}

.single.single-radio ul#minisubnav li#subradio {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -40px;
}

ul#mininav li#mntv a {
    width: 30px;
    background-position: -33px 0px;
}

ul#mininav li#mntv a:hover {
    width: 30px;
    background-position: -33px -31px;
}

ul#mininav li#mntv a:hover ul#minisubnav li#subtv {
    display: inline !important;
}

.post-type-archive-gctv ul#minisubnav li#subtv {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -27px;
}

.single.single-gctv ul#minisubnav li#subtv {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -27px;
}

ul#mininav li#mnblog a {
    width: 30px;
    background-position: -66px 0px;
}

ul#mininav li#mnblog a:hover {
    width: 30px;
    background-position: -66px -31px;
}

.category-blog.category-2 ul#mininav li#mnblog a {
    width: 30px;
    background-position: -66px -31px;
}

.category-blog.category-2 ul#minisubnav li#subblog {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -38px;
}

.single.single-post ul#minisubnav li#subblog {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -38px;
}

.single.single-post.category-2 ul#minisubnav li#subblog {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -38px;
}

ul#mininav li#mncontests a {
    width: 30px;
    background-position: -99px 0px;
}

ul#mininav li#mncontests a:hover {
    width: 30px;
    background-position: -99px -31px;
}

.post-type-archive-contests ul#mininav li#mncontests a {
    width: 30px;
    background-position: -99px -31px;
}

ul#minisubnav li#subcontests {
    display: none;
    position: relative;
    top: -75px;
    left: 90px;
}

.post-type-archive-contests ul#minisubnav li#subcontests {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -53px;
}

.single.single-contests ul#minisubnav li#subcontests {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -53px;
}

ul#mininav li#mnarchives a {
    width: 30px;
    background-position: -132px 0px;
}

ul#mininav li#mnarchives a:hover {
    width: 30px;
    background-position: -132px -31px;
}

.page.page-id-108 ul#mininav li#mnarchives a {
    width: 30px;
    background-position: -132px -31px !important;
}

.page.page-id-108 ul#minisubnav li#subarchive {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -53px;
}

ul#mininav li#mnabout a {
    width: 30px;
    background-position: -165px 0px;
}

ul#mininav li#mnabout a:hover {
    width: 30px;
    background-position: -165px -31px;
}

.page.page-id-119 ul#mininav li#mnabout a {
    width: 30px;
    background-position: -165px -31px;
}

.page.page-id-119 ul#minisubnav li#subabout {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -42px;
}

.page-child.parent-pageid-119 ul#minisubnav li#subabout {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -42px;
}

ul#minisubnav {
    width: 235px;
}

ul#minisubnav li {
    color: #a7a9ac;
    font-size: 1.2em;
}

ul#minisubnav li#subradio {
    display: none;
}

ul#minisubnav li#subtv {
    display: none;
}

ul#minisubnav li#subblog {
    display: none;
}

ul#minisubnav li#subcontests {
    display: none;
}

ul#minisubnav li#subarchive {
    display: none;
}

ul#minisubnav li#subabout {
    display: none;
}

Josh KG Josh KG · Accepted Answer · 2013-10-11T22:07:00

Your subnav uls need to be children of your top level lis, like so:

<li id="mnradio"><a href="http://www.getconnectedmedia.com/wp/?post_type=radio">radio</a>
    <ul id="minisubnav">
        <li id="subradio">RADIO</li>
    </ul>
</li><!-- #mnradio -->

Then in the CSS you'll need to select your li for the :hover target rather than the anchor in order to show the child subnav li. The subnav ul is not a child of the anchor tag which is why you'll need to use the actual parent tag, the li, as the hover target:

li#mnradio:hover li#subradio {
    display: inline !important;
}

I would actually recommend, however, that you hide the whole subnav ul instead of the just the li, then show the ul with the hover target:

ul#minisubnav {
    display: none;
}
li#mnradio:hover ul#minisubnav {
    display: block;
}

Also I recommend changing all your subnav ids to classes. Technically speaking there is only supposed to be one id per page. If you're reusing that id, change it to be a class instead. See the spec: http://dev.w3.org/html5/markup/global-attributes.html.

CSS menu, display subnav on hover

2 Answers