SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Daylesford, Victoria
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal drop menu - display:block question

    Hello.
    I am trying to adapt a horizontal drop menu using nested lists and css. I am having trouble with firefox displaying the first ul element. It is displaying only half the height of the tag and I can't figure out why.
    May it have something to do with where I apply my display:block for the vertical nested ul's?

    I want to retain the h2 tag on the horizontal and h3 on the vertical if possible...

    Code CSS:
    /* CSS Document */
     
    /* HORIZONTAL DROP DOWN MENU */
     
     
     
    #menu {
    width: 600px; /* set width of entire menu here */
    background: #ffffff;
    float: left; /* this makes the first UL horizontal */
     
    }
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 150px;  /* set width of each menu item here - when multiplied by no of menu-items should equal width above */
    float: left; /* this makes the first UL horizontal */
    }
     
     
    /*  COLOURING ETC */
     
    #menu a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    }
     
     
    #menu h2, #menu h3 {
    margin: 0;
    }
     
    #menu h2 a, #menu h3 a {
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 2px 3px;
    color: #ffffff;
    border-left: 8px solid #999999;
    text-decoration: none;
    background: #CC0000;
    margin-right: 4px;
    }
     
    #menu h3 {
    border-top: 1px solid #ffffff;
    }
     
    #menu a:hover  {
    border-left: 8px solid #cccccc;
    text-decoration: none;
    background: #C95B5B;
     
    }
     
    /*   -------- positioning the SUBMENUS --------------
     
    The position: relative; on the <li> elements establish containing blocks for the descendant <ul> elements.
     
    All secondary levels and deeper are given position: absolute; and a high z-index in order to make them appear, drop down above following content. the third level and deeper lists are the ones we want to move so "offset" positioning co-ordinates only required to be input onto them.
    */
     
    #menu li {
    position: relative; }
     
    #menu ul ul {
    position: absolute;
    z-index: 500;
    }
     
    #menu ul ul ul {
    top: 0;
    left: 100%;
    }
     
    /*   -------- HIDING AND REVEALING --------------*/
     
    div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
     
    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
     
     
     
    /* FIX FOR IE  */
    body {
    behavior: url(csshover.htc);
    font-size: 100%;
    }
     
    #menu ul li {float: left; width: 100%;}
    #menu ul li a {height: 1%;}

    example of my HTML is

    Code HTML4Strict:
    <div id="menu">
    <ul>
      <li><h2><a href="#">menu1</a></h2>
        <ul>
          <li><h3><a href="" title="">menu1-sub1-item1</a></h3></li>
          <li><h3><a href="" title="">menu1-sub1-item2</a></h3></li>
    	  <li><h3><a href="" title="">menu1-sub1-item3</a></h3></li>
        </ul>  
      </li>
    </ul>							
     
    <ul>
      <li><h2><a href="#">menu2</a></h2>
      	 <ul>
          <li><h3><a href="#" title="">menu2-sub1-item1</a></h3></li>
          <li><h3><a href="#" title="">menu2-sub1-item2</a></h3></li>
    	  <li><h3><a href="#" title="">menu2-sub1-item3</a></h3></li>
        </ul>  
      </li>
    </ul>							
     
    <ul>
      <li><h2><a href="#">menu3</a></h2>
      	 <ul>
          <li><h3><a href="" title="">menu3-sub1-item1</a></h3></li>
          <li><h3><a href="" title="">menu3-sub1-item2</a></h3></li>
    	  <li><h3><a href="" title="">menu3-sub1-item3</a></h3></li>
        </ul>  
      </li>
    </ul>							
     
     
    <ul>
      <li><h2><a href="#">menu4</a></h2>
        <ul>
          <li><h3><a href="" title="">menu4-sub1-item1</a></h3></li>
          <li><h3><a href="" title="">menu4-sub1-item2</a></h3></li>
        </ul>
      </li>
    </ul>							
     
     
    </div>

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Not to address your question, but that is a incorrect use of heading tags.
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Daylesford, Victoria
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - not sure why you think that. It makes sense structurally and it validates without any warnings...

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Daylesford, Victoria
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found my error! I actaully didn't have the correct doc-type declaration and namespace at the top of the document I was testing it in.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    I don't have a problem with your use of headings - but you should only have one ul element.
    There's no point in wrapping a sublist in a parent list with only one li element.
    Code:
    <ul id="menu">
      <li><h2><a href="#">menu1</a></h2>
        <ul>
          <li><h3><a href="" title="">menu1-sub1-item1</a></h3></li>
          <li><h3><a href="" title="">menu1-sub1-item2</a></h3></li>
          <li><h3><a href="" title="">menu1-sub1-item3</a></h3></li>
        </ul> 
      </li>
      <li><h2><a href="#">menu2</a></h2>
         <ul>
          <li><h3><a href="#" title="">menu2-sub1-item1</a></h3></li>
          <li><h3><a href="#" title="">menu2-sub1-item2</a></h3></li>
          <li><h3><a href="#" title="">menu2-sub1-item3</a></h3></li>
        </ul> 
      </li>
      <li><h2><a href="#">menu3</a></h2>
         <ul>
          <li><h3><a href="" title="">menu3-sub1-item1</a></h3></li>
          <li><h3><a href="" title="">menu3-sub1-item2</a></h3></li>
          <li><h3><a href="" title="">menu3-sub1-item3</a></h3></li>
        </ul> 
      </li>
      <li><h2><a href="#">menu4</a></h2>
        <ul>
          <li><h3><a href="" title="">menu4-sub1-item1</a></h3></li>
          <li><h3><a href="" title="">menu4-sub1-item2</a></h3></li>
        </ul>
      </li>
    </ul>

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do. Headings are for page content (the text we read), not menus. Also, search engine spiders will pay more attention to the content in the menu headings, which is something you probably don't want. Keep them in the content, where they belong.

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Ditto on Dan's comment.


    .sorry for my tardyness
    Ryan B | My Blog | Twitter


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
  •