Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with my css drop down menu

    I'm coding a layout a friend of mine designed and I'm almost done, but I'm trying to get the navigation to work. My drop down menu is working in FF, but I still can't get it to work with IE. Can anyone point out what I'm doing wrong? I'm assuming it has something to do with the hover state, but I've never really done this before and don't know all the rules.

    International Day of Peace Vigil

    Code:
        #menu { display:block; position:relative; float:right; background:#FFFFFF; }
        #menu ul { list-style:none; margin:0; padding:0;width:9em; float:left; border:1px solid #234b9a; background:#FFFFFF; }
        #menu a, #menu h2 { font: 11px Lucida Grande, Verdana, sans-serif; background:#FFFFFF; font-weight:bold; display:block; margin:0; padding: 2px 3px; }
        #menu h2 { color:#333333; font-weight:bold; background:#FFFFFF; }
        #menu a { color:#333333; font-weight:bold; text-decoration:none; background:#FFFFFF; }
        #menu a:hover { color:#234b9a; font-weight:bold; text-decoration:underline;background:#FFFFFF;}
        
        #menu li { position: relative; background:#FFFFFF; }
        #menu ul ul { position: absolute; z-index: 500; background:#FFFFFF; }
        
        #menu ul ul { display:none; background:#FFFFFF; }
        div#menu ul li:hover ul { display:block; background:#FFFFFF; }
    Code:
        <div id="menu">
          <ul>
              <li><h2><a href="about.html"><center>About Us</center></a></h2>
              <ul>
                  <li><a href="bios.html">Bios</a></li>
                  <li><a href="resolution.html">Resolution</a></li>
              </ul></li>
          </ul>
          <ul>
              <li><h2><a href="organizations.html"><center>Organizations</center></a></h2></li>
          </ul>
          <ul>
              <li><h2><a href="faq.html"><center>FAQ</center></a></h2></li>
          </ul>
          <ul>
              <li><h2><a href="support.html"><center>Support</center></a></h2>
              <ul>
                  <li><a href="help.html">How to Help</a></li>
                  <li><a href="volunteer.html">Volunteer</a></li>
                  <li><a href="commit.html">Make a Commitment</a></li>
                  <li><a href="commitmentsarchive.html">2007 Commitments</a></li>
              </ul></li>
          </ul>
          <ul>
              <li><h2><a href="downloads.html"><center>Downloads</center></a></h2></li>
          </ul>
          <ul>
              <li><h2><a href="mailto:info@idpvigil.com" target="_blank"><center>Contact Us</center></a></h2></li>
          </ul>
        </div>

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Are you using IE6? If so you might need to upload csshover.htc.

    Download it here, upload it to your base directory, and add

    Code:
    <!--[if IE 6]>
    
    <style type="text/css"> body { behavior: url(csshover.htc);} </style>
    
    <![endif]-->
    to your head of your markup file.

    That solved IE6 hover problems for me.
    matt | design | blog

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wait. is this is a script I copy into my markup? I've never heard of .htc before.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    No, it's an external file you reference in IE with the IE-specific (as far as I know) behavior property. You might even be able to add it to your CSS without the "If IE" hack (FF, etc would just ignore it), but I would use the hack initially just to be safe.
    matt | design | blog


  •  

    Posting Permissions

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