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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Dropdown menu not working in Firefox

    I am trying to create a dropdown menu in only CSS. I have it working in IE 7, but Firefox doesn't like it one bit. Here is the XHTML:

    Code:
    <div id="menubar">
    			<ul>
    				<li><a href="index.html">Home.Go()&nbsp;|&nbsp;</a></li>
    			</ul>
    			<ul>
    				<li><a href="about.html">About.Us(Info)&nbsp;|&nbsp;</a></li>
    			</ul>
    			<ul>
    				<li><a href="projects.html">Projects.Create()&nbsp;|&nbsp;</a></li>
    				<ul>
    					<li><a href="arcgis.html">ArcGIS Projects</a></li>
    					<li><a href="vbdotnet.html">VB.NET Projects</a></li>
    					<li><a href="joomla.html">Joomla! Projects</a></li>
    				</ul>
    			</ul>
    			<ul>
    				<li><a href="contact.html">Contact(Us)</a></li>
    			</ul>
    		</div>
    And here is the CSS for the menu bar:

    Code:
    div#menubar {
    margin: 0 auto;
    background-color: #000000;
    color: #FFFFFF;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 4px;
    width: 594px;
    height: 15px;
    }
    
    #menubar a {
    color: #FFFFFF;
    text-decoration: none;
    margin-top: 0px;
    }
    
    #menubar a:hover {
    font-weight: bold;
    }
    
    #menubar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;	
    }
    
    #menubar li {
    position: relative;
    }
    
    div#menubar ul li:hover ul {
    visibility: visible;
    padding: 5px;
    background-color: #666666;
    width: 145px;
    text-align: left;
    }
    
    div#menubar ul ul{
    visibility: hidden;
    }
    The dropdown menu will not appear.

    Any assistance in sorting this out would be GREATLY appreciated.

    Thanks in advance!
    Last edited by airickjay; 09-22-2009 at 08:49 PM.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Validating your HTML would have caught this. You have this code:

    Code:
    <ul>
        <li><a href="projects.html">Projects.Create()&nbsp;|&nbsp;</a></li>
        <ul>
            <li><a href="arcgis.html">ArcGIS Projects</a></li>
            <li><a href="vbdotnet.html">VB.NET Projects</a></li>
            <li><a href="joomla.html">Joomla! Projects</a></li>
        </ul>
    </ul>
    …which is not only invalid but your CSS shouldn't be working — li:hover ul wouldn't affect anything because there is no UL inside a LI.

    Try with this:

    Code:
    <ul>
        <li><a href="projects.html">Projects.Create()&nbsp;|&nbsp;</a>
            <ul>
                <li><a href="arcgis.html">ArcGIS Projects</a></li>
                <li><a href="vbdotnet.html">VB.NET Projects</a></li>
                <li><a href="joomla.html">Joomla! Projects</a></li>
            </ul>
        </li> 
    </ul>
    You'll also have greater luck using display:none/block versus visibility:hidden/visible since the first way won't take up any layout.

  • Users who have thanked rmedek for this post:

    airickjay (09-22-2009)

  • #3
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    awesome, thanks for the quick response.

  • #4
    New Coder
    Join Date
    Jul 2009
    Posts
    91
    Thanks
    5
    Thanked 6 Times in 6 Posts
    It's working here for me in Firefox - not sure if it looks how you intend:
    Attached Thumbnails Attached Thumbnails Dropdown menu not working in Firefox-test.jpg  
    Last edited by clunk.werclick; 09-22-2009 at 07:48 PM. Reason: See the issue is fixed elsewhere

  • #5
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The dropdown wouldn't function, but I guess that was because my tags were nested incorrectly. My next issue it seems is that in Firefox, when the dropdown menu comes down, it moves all of the text below it rather than covering it up. This works fine in IE. Any ideas? I played with the z-indices of all the involved elements, but it doesn't seem to make a difference.

  • #6
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Figured it out, had to add an absolute position to the dropdown!

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quit using IE as a reference for how things should work and you won't have so many problems. Always, always use any other browser for your initial test. THEN look to see if/when IE screws things up. We always hack IE, not Firefox.


  •  

    Posting Permissions

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