SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ubmenu not working in firefox or chrome, but works in IE8 and 9?

    html:
    Code:
    <div id="navigation">
    <ul class="top-level">
    <li><a href="index.htm">Home Page</a></li>
    <li><a href="#">Driver Risk Inventory-II</a></li>
    <li><a href="#">How To Order</a></li>
    <li><a href="#">Scale Interpretation</a></li>
    <li><a href="#">Cost</a></li>
    <li><a href="#">Example Report</a></li>
    <li><a href="#">DRI-II Research</a></li>
    <ul class="sub-level">
    <li><a href="#">Sub Menu Item 1</a></li>
    <li><a href="#">Sub Menu Item 2</a></li>
    <li><a href="#">Sub Menu Item 3</a></li>
    <li><a href="#">Sub Menu Item 3</a></li>
    <li><a href="#">Sub Menu Item 4</a></li>
    <li><a href="#">Sub Menu Item 5</a></li>
    <li><a href="#">Sub Menu Item 6</a></li>
    <li><a href="#">Sub Menu Item 7</a></li>
    <li><a href="#">Sub Menu Item 8</a></li>
    </ul>
    <li><a href="#">NHTSA Review</a></li>
    <li><a href="http://www.bdsltd.com/">www.bdsltd.com</a></li>
    <li><a href="http://www.online-testing.com/">www.online-testing.com</a></li>
    </ul>
    </div>
    css:

    /* vertical menu */
    Code:
    #navigation {/* font-size:1em; */ width:225px; }
    #navigation ul {margin:0px; padding:0px;}
    #navigation li {list-style: none;}
    
    ul.top-level {background:#660000;}
    ul.top-level li {
    border-bottom: #ccc solid;
    border-top: #ccc solid;
    border-width: 1px;
    }
    
    #navigation a {
    color: #fff;
    cursor: pointer;
    display:block;
    height:30px;
    line-height: 30px;
    text-indent: 10px;
    text-decoration:none;
    font-size:16px;
    width:100%;
    }
    #navigation a:hover{
    text-decoration:underline;
    }
    
    #navigation li:hover {
    background: #000000;
    position: relative;
    }
    
    ul.sub-level {
    display: none;
    }
    li:hover .sub-level {
    background: #660000;
    border: #fff solid;
    border-width: .5px;
    display: block;
    position: absolute;
    left: 225px;
    top: 5px;
    }
    ul.sub-level li {
    border: 1px solid #fff;
    float:left;
    width:150px;
    }
    
    /*Seconda Level*/
    #navigation .sub-level {
    background: #660000;
    }
    
    
    
    /*RESET STYLES*/
    li:hover .sub-level .sub-level {
    display:none;
    }
    .sub-level li:hover .sub-level {
    display:block;
    }
    any help would be cool...
    Last edited by Paul O'B; Sep 10, 2011 at 05:12. Reason: code tags added

  2. #2
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    submenu not working in firefox or chrome, but works in IE8 and 9?

    sorry for the typo

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Run your HTML through the W3C validator because before looking for bugs, the first step must always be "find your typos".

    After you've corrected the HTML, see who still breaks and post again.

    As a side note: you have a div wrapping your menu, but you don't need it. You're using :hover to do everything, but that means it won't work for keyboard users. And the display: none/block method is known to keep menus hidden from folks using screen readers.

    I really like the setup at HTMLdog's Sons of Suckerfish menu. They are missing one thing, a "trigger" for IE7, otherwise it's a pretty good menu. If you're not supporting IE6, you don't need the Javascript they offer. That's only for IE6 who can't li:hover anyway.

    They get around the problem of display: none/block, so their menu is fairly accessible.
    You can make it keyboard accessible too, so I guess that's my other gripe with HTMLdog is they don't build in keyboard accessiblity from the beginning and they could have.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,855
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    As Mallory suggested above the poblem is invalid code. Specifically here:

    Code:
    <li><a href="#">DRI-II Research</a></li>
    <ul class="sub-level">
    You don't have any nested submenus. You have a ul placed in no-mans-land which is why the styles don't target it. The ul should be within he list pair. Move that last closing list tag to the other side of the nested ul.

    The structure should be like so.
    Code:
    <div id="navigation">
    		<ul class="top-level">
    				<li><a href="index.htm">Home Page</a></li>
    				<li><a href="#">Driver Risk Inventory-II</a></li>
    				<li><a href="#">How To Order</a></li>
    				<li><a href="#">Scale Interpretation</a></li>
    				<li><a href="#">Cost</a></li>
    				<li><a href="#">Example Report</a></li>
    				<li><a href="#">DRI-II Research</a>
    						<ul class="sub-level">
    								<li><a href="#">Sub Menu Item 1</a></li>
    								<li><a href="#">Sub Menu Item 2</a></li>
    								<li><a href="#">Sub Menu Item 3</a></li>
    								<li><a href="#">Sub Menu Item 3</a></li>
    								<li><a href="#">Sub Menu Item 4</a></li>
    								<li><a href="#">Sub Menu Item 5</a></li>
    								<li><a href="#">Sub Menu Item 6</a></li>
    								<li><a href="#">Sub Menu Item 7</a></li>
    								<li><a href="#">Sub Menu Item 8</a></li>
    						</ul>
    				</li>
    				<li><a href="#">NHTSA Review</a></li>
    				<li><a href="http://www.bdsltd.com/">www.bdsltd.com</a></li>
    				<li><a href="http://www.online-testing.com/">www.online-testing.com</a></li>
    		</ul>
    </div>

  5. #5
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. I don't know why I didn't think to check w3 validator... I was pretty sure it was a problem with html (per what I found on google).

    Thank you again.


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
  •