SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop Down Menu not working properly

    I followed a tutorial on YouTube (YouTube - CSS Horizontal Drop Down Menu - 1 of 2 which worked. I then attempted to add a sub sub menu but I can't get it work properly. None of the sub menus work in IE.

    You can see what is happening at Untitled and I have added all the code below.

    I would be very grateful for any help.

    KarenBW
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="navMenu">
    <ul>
        <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
          <ul>
          <li><a href="#">Tribes</a></li>
          <li><a href="#">Staff</a></li>
          <li><a href="#">College Policies</a></li>
              <li><a href="#">Employment</a></li>
          <li><a href="#">Contact ASC</a></li>
          </ul><!-- end sub UL -->
        </li><!-- end main LI -->
          <li><a href="#">News and Events</a>
          <ul>
          <li><a href="#">Newsletter - Inside Out</a></li>
          <li><a href="#">Key Dates</a></li>
          <li><a href="#">Future Events</a></li>
          </ul><!-- end sub UL -->
        </li><!-- end main LI -->
          <li><a href="#">Teaching and Learning</a>
          <ul>
          <li><a href="#">Curriculum Overview</a>
                  <ul>
            <li><a href="#">Years 7 and 8</a></li>
            <li><a href="#">Year 9</a></li>
            <li><a href="#">Year 10</a></li>
                    <li><a href="#">VCE</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Handbooks</a></li>
              </ul><!-- end sub sub UL -->
                </li>
          <li><a href="#">Curriculum</a></li>
                    <ul>
            <li><a href="#">Years 7 and 8</a></li>
            <li><a href="#">Year 9</a></li>
            <li><a href="#">Year 10</a></li>
                    <li><a href="#">VCE</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Handbooks</a></li>
              </ul><!-- end sub sub UL -->
          <li><a href="#">Timetables</a></li>
              <li><a href="#">Term Dates</a></li>
          </ul><!-- end sub UL -->
        </li><!-- end main LI -->
          <li><a href="#">ASC Community</a>
          <ul>
          <li><a href="#">Parents and Friends</a></li>
          <li><a href="#">Canteen</a></li>
          </ul><!-- end sub UL -->
        </li><!-- end main LI -->
    </ul><!-- end main UL -->
    <br class="clearFloat" />
    </div> <!-- end navMenu -->
    </div> <!-- end wrapper -->
    </body>
    </html>
    Code:
    #navMenu {
        margin: 0;
        padding: 0;
    }
    #navMenu ul {
        margin: 0;
        padding: 0;
        line-height: 30px;
    }
    #navMenu li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        position: relative;
        background: #999;
    }
    #navMenu ul li a {
        text-align: center;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        text-decoration: none;
        height: 30px;
        width: 200px;
        display: block;
        color: #fff;
        border: 1px solid #fff;
        text-shadow: 1px 1px 1px #000;
    }
    #navMenu ul ul {
        position: absolute;
        display: none;
        top: 32px;
    }
    #navMenu ul ul ul {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
    }
    #navMenu ul li:hover ul{
        display: block;
    }
    #navMenu ul ul li:hover ul {
        display: block;
    }
    #navMenu li:hover {
        background: #09f;
    }
    #navMenu ul li:hover ul li a:hover {
        background: #ccc;
        color: #000;
    }
    #navMenu a:hover {
        color: #000;
    }
    .clearFloat {
        clear: both;
        margin: 0;
        padding: 0;
    }
    Last edited by Paul O'B; Mar 28, 2011 at 01:44. Reason: code tags added

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Hi Karen and welcome to Site Point!

    You need to change the doctype, thats that FIRST LINE of code in the HTML... to
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    That should solve your problems in IE7 and up, IE6 is beyond repair however as it doesn't recognize :hover on any element other than <a> without some javascript help ... ( and its not valid to do a <a><a> so don't even think about it )


    Hope that resolves your problem.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much. I had read that you needed a transitional DocType declaration and I looked at mine and thought it would be OK. I obviously got it wrong. Thank you very much for the help.

    Karen BW


Tags for this Thread

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
  •