WordPress.org

Ready to get started?Download WordPress

Forums

Drop Down menu:Chrome, Safari vs FireFox and Internet Explorer (2 posts)

  1. wrecktom
    Member
    Posted 2 years ago #

    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;
    }
  2. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    @wrecktom,

    You need to first fix the errors in the menu as specifically noted in your repeat post of this topic

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.