Pure css dropdown

Hey guys,

Heres my very basic code for a pure css dropdown taken from a youtube tutorial, can anyone tell me how to nest another sublevel properly. As you can see I have added the extra nested list but I just cannot show and hide the 2nd level menu properly, mainly because I can’t identify it in my css,
can anyone please help!

you’re welcome :slight_smile:

Hey thank you both kindly,
I have only recently left the old school tables techniques and opted for tableless csss and have had no end of trouble with this particular aspect, ul inside li inside ul which is the child of ul and li and ul. Aaaaaaaaaaaaaaaaaaaaaaaa! Thanks again :slight_smile:

i took a different approach: hiding <a>.
the main elements used as actual elements in the menu are <a>s, so it’s only logical they are the targets.

i’ve commented the part that hides/shows <ul> & <li>, but i let it there anyway as a reference.

also, the main <li>Products entries have no reason to be anchors.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head>
<title>Chapter 4 - horizontal list menu</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" charset="utf-8">
  #navMenu li {cursor:pointer;}
  
  /*
  * hides li
  * but hiding a is better
  #navMenu ul li ul li, ul li ul li ul { margin-left:-999em; }
  #navMenu ul li:hover ul li, ul li:hover ul li:hover ul { margin-left:0em; }
  */
  
  #navMenu a, #navMenu ul li:hover ul li ul li a { margin-left:-999em; }
  #navMenu ul li:hover ul li a, #navMenu ul li:hover ul li:hover ul li a { margin-left:0em; }
</style></head><body>
  <div id="navMenu">

    <ul>
    	<li>Products
        <ul>
         <li><a href="#">item one</a></li>
         <li><a href="#">item two</a></li>
         <li><a href="#">item three</a></li>
         <li><a href="#">item four</a></li>
      </ul>
      </li>
      
    	<li>Products
        <ul>
          <li><a href="#">item one</a></li>
          <li><a href="#">item two</a></li>
          <li><a href="#">item three</a></li>
          <li><a href="#">item four</a>
            <ul>
              <li><a href="#">sub!!!!</a></li>
              <li><a href="#">sub!!!!</a></li>
            </ul>
          </li>
          </ul>
       </li>
    </ul>

</div>
</body></html>

Hi,

With a drop down nested menu its just a matter of “more of the same”. You have to cancel out styles on any nested submenus that are cascading from the menu before it. So when you show a sub menu you must also hide the nested submenu that lies within it.

Your html was corrupt anyway as you hadn’t nested the sub sub list correctly within the list element.

I would also avoid visibility:hidden as that means sub menus may be hidden from screen readers and the like. Best to use an off screen technique of which the most reliable is margin-left:-999em.

Here is the revised code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Chapter 4 - horizontal list menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
<style type"text/css">
#wrapper
{
background:#999;
border: 3px solid red;
}

#navMenu     /* menu div*/
{
  padding:0;   /* removes list indentation*/
    margin:0;     /* removes list indentation*/
}


#navMenu ul
{
  padding:0; /* removes list indentation*/
    margin:0;   /* removes list indentation*/
    line-height:30px;  /*the height of the line that the text is in*/
    list-style:none;
}


#navMenu li
{
    float:left;     /* makes list items horizontal - float to the left */
    position:relative;  /*prevents absolute positoned children from leaving the list block i.e. they respect parent position*/  
    background:#999;
}


#navMenu ul li a
{
  text-align:center;  /* centers the link*/  
    font-family:"comic sans MS", verdana;
    height:30px;  /* height of block*/
    width:150px;  /* width of block */
    display:block;  /* allows us to click on any part of that box rather than just the link text! */
  color:#fff;
    border: 1px solid #000;
    text-decoration:none;
}

#navMenu ul ul
{
position:absolute;  /* makes the nested list line up vertically under the main list */
margin-left:-999em;  /* hides the nested list */
top:32px; /*same height as the link blocks above with adjustment for border */
left:0;
}



#navMenu ul li:hover ul  /* hover of the unordered list inside the list item of the unordered list */
{ 
margin-left:0;  /* shows the nested list */
}


/********************************************************************/
/*sub-sub menu section*/

#navMenu ul li:hover ul ul
{
margin-left:-999em 
}

#navMenu ul ul li:hover ul  /* hover of the unordered list inside the list item of the unordered list */
{ 
margin-left:100&#37;;  /* shows the nested list */
top:0;
}

/********************************************************************/
 
#navMenu ul li:hover /* hover background for ul li */
{ 
background:#09f;   

}

#navMenu ul li:hover ul li a:hover /* keeps the main menu same hover colour(blue) whilst changing text and bg color on sun items*/
{ 
background:#ccc; 
color:#000;  
}

 #navMenu a:hover /* hover of main menu link*/
{ 
color:#000; 
}


.clearfloat    /* this prevents the wrapper div from collapsing contains the flow of the menu*/
{
 clear:both;
 margin:0;
 padding:0;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="navMenu">
        <ul>
            <li><a href="#">Products</a>
                <ul>
                    <li><a href="#">item one</a></li>
                    <li><a href="#">item two</a></li>
                    <li><a href="#">item three</a></li>
                    <li><a href="#">item four</a></li>
                </ul>
            </li>
        </ul>
        <ul>
            <li><a href="#">Products</a>
                <ul>
                    <li><a href="#">item one</a></li>
                    <li><a href="#">item two</a></li>
                    <li><a href="#">item three</a></li>
                    <li> <a href="#">item four</a>
                        <ul>
                            <li><a href="#">sub!!!!</a></li>
                            <li><a href="#">sub!!!!</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <br class="clearfloat"/>
    </div>
</div>
</body>
</html>


Note that the above will not work in IE6 as it doesn’t understand hover on anything but anchors. You wuld need a small script to support IE6 (google suckerfish dropdown).