Question

I’m having a little trouble figuring out which selector or selector hierarchy I should use with my CSS to get a ‘sub menu’ to display.

I want to have the sub-menu appear based on the hovering of a:link within a completely separate <nav> within a <ul>.

I’m just not sure how to write the CSS in order to obtain that effect

HTML

<div class="row">
    <nav id="nav" class="nav-holder">
        <ul id="nav" class="menu">
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
        </ul>
    </nav>
    </div>
    <div class="cleared"></div>

    <div class="row">
        <div class="submenunav"></div>
    </div>

The wrong CSS

.submenunav { display:none;}

#nav ul#nav li a:hover .submenunav {
   position:absolute;
   z-index:500;
   display:block;
   margin:0px;
   padding:0px;
   width:940px;
   height:200px;
   background:#E9EAEE;
   border-bottom:9px #67B7E1 solid;
   box-shadow:0 8px 6px -6px black;
}​

My fiddle – http://jsfiddle.net/NVwks/

The desired effect would be for the submenu block to appear based on hovering over any links, although eventually I will be giving the a:links unique classes for unique submenus.

Many thanks SO.

Answer 1

The problem here is that your a:link elements are contained within your nav element, which as you say is completely separate from the sub-menu elements you want to display. This separation in your structure makes it impossible to achieve with :hover and other CSS selectors alone.

There doesn’t seem to be much room for restructuring your markup, so you may have to use a script to achieve your desired functionality.