SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

    http://www.cbl.com/whe/listnav_horiz.html

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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:

    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).

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    HTML 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">
    <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>

  4. #4
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're welcome


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •