WordPress.org

Support

Support » How-To and Troubleshooting » Drop Down menu:Chrome, Safari vs FireFox and Internet Explorer

Drop Down menu:Chrome, Safari vs FireFox and Internet Explorer

  • here is the deal, I’ve been struggling for 2 days to get a drop down menu for my website: Stupid Addiction

    I used this drop down menu tutorial

    Everything was fine until I decided to center the menu.

    When I use Chrome or safari, the sub menus display well, but as soon as I get on FF or IE, the sub-menus appear on the left of the screen. I’m really lost here, and I feel like throwing my computer out of the window, I’ve been trying to fix this for like 6hrs without results and I can’t think outside the box right now.

    Help would be greatly apreciated!

    Here is the CSS I am using:

    /* The container wrapping ul.dropdown */
    #navwrap {
    width:100%;
    height:28px;
    background:#444;
    font-family: 'cuprum',arial;font-size: 16px;
    padding-top:12px;
    
    }
    
    /* Top level Unordered list */
    ul.dropdown {
    list-style:none;
    text-align:center;
    width:100%;
    padding: 0 10px;
    position:relative;
    }
    
    ul.dropdown  li{
    display:inline;/* makes horiz list */
    text-align:center;
    position:relative; /* hey Submenu ULs, appear below! */
    }
    ul.dropdown a {
    padding:12px; /*space the items, occupy entire height too.*/
    color:#eee;
    text-decoration:none;
    text-shadow:0 1px 0 #000;
    
    }
    
    /* Style the link hover */
    ul.dropdown li:hover a {
    background:#444;
    border-top:1px solid #777;
    border-bottom: 1px solid #000;
    border-right:1px solid #666;
    }
    
    /* Displays the link as blocks. */
    ul.dropdown li ul a {
    display:block;
    }
    
    /* sub menus!!  */
    
    ul.dropdown ul {
    list-style: none;
    margin:0;/* Appear just below the hovering list */
    padding:0;
    width:150px; /* specify the width. */
    position:absolute; /* needed */
    z-index:500; /* specify the order */
    }
    
    ul.dropdown li ul {
    top:27px; /* Positioning:Calc with top level horz list height */
    -moz-box-shadow:0 2px 10px #000; /* CSS 3 */
    }
    
    ul.dropdown ul ul {
    top:0;
    left:100%; /* Position the sub menus to right. */
    }
    
    ul.dropdown ul li {
    float:none; /* umm.. Appear below the previous one. mmkay? */
    }
    
    /* Drop Down! */
    
    /* Hide all the dropdowns (submenus) */
    ul.dropdown ul,
    ul.dropdown li:hover ul ul,
    ul.dropdown ul li:hover ul ul
    { display: none; }
    
    /* Display the submenus only when li are hovered */
    ul.dropdown li:hover ul,
    ul.dropdown ul li:hover ul ,
    ul.dropdown ul li ul li:hover ul
    { display: block;}
    
    ul.dropdown li * a:hover {
    background-color: #e25219;
    
    border-bottom:1px solid #900;
    border-top:1px solid #222;
    }
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Drop Down menu:Chrome, Safari vs FireFox and Internet Explorer’ is closed to new replies.
Skip to toolbar