#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    1
    Rep Power
    0

    Trouble Centering Dropdown Navigation


    I am having serious issues getting a CSS dropdown navigation menu to center. I have tried everything, but something is pushing it off. If I remove the “Padding=0” from the reset CSS, it moves to the center, but the space on the left and right are not equal. Any advice would be greatly appreciated.

    CSS:

    #menu{
    border:none;
    border:0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    width:960px;
    }
    #menu ul{
    background: url(../images/nav_background.jpg) #eef3f6;
    height:35px;
    list-style:none;
    text-transform: uppercase;
    }
    #menu li{
    float:left;
    }
    #menu li a{
    color:#072c46;
    display:block;
    font-weight:normal;
    line-height:35px;
    padding:0px 30px;
    text-align:center;
    text-decoration:none;
    }
    #menu li a:hover, .menu ul li:hover a{
    background:url(../images/nav_background_over.jpg);
    color:#FFFFFF;
    text-decoration:none;
    }
    #menu li ul{
    background:#8bb8c6;
    display:none;
    height:auto;
    padding:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
    #menu li:hover ul{
    display:block;

    }
    #menu li li {
    background:url(../images/sub_sep.gif) bottom left no-repeat;
    display:block;
    float:none;
    width:225px;
    }
    #menu li:hover li a{
    background:none;

    }
    #menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    text-align:left;
    }
    #menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url(../images/hover_sub.gif) center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }
    #menu p{
    clear:left;
    }


    #menu li.spacer{
    width: 3px;
    }


    HTML:

    <link rel="stylesheet" type="text/css" href="menu/reset.css" />
    <link rel="stylesheet" type="text/css" href="menu/menu_style.css" />
    </head>


    <div id="menu">
    <ul>
    <li><a href="About-Us.html" target="_self" >About Us</a>
    <ul>
    <li><a href="About-Us/Our-Team.html" target="_self">Our Team</a></li>
    <li><a href="About-Us/Case-Studies.html" target="_self">Case Studies</a></li>
    </ul>
    </li>
    <li class="spacer"><img src="images/seperator.gif">
    </li>
    <li><a href="Manufacturer-Partners.html" target="_self" >Manufacturer Partners</a>
    <ul>
    <li><a href="Manufacturer-Partners/Become-a-PMP.html" target="_self">Become a PMP</a></li>
    </ul>
    </li>
    <li class="spacer"><img src="images/seperator.gif">
    </li>
    <li><a href="Dealers.html" target="_self" >Dealers</a>
    <ul>
    <li><a href="Dealers/Become-a-Dealer.html" target="_self">Become a Dealer</a></li>
    <li><a href="Dealers/Dealer-Listings.html" target="_self">Dealer Listing</a></li>
    </ul>
    </li>
    <li class="spacer"><img src="images/seperator.gif">
    </li>
    <li><a href="News.html" target="_self" >News</a>
    <ul>
    <li><a href="News/Archived-News.html" target="_self">Archived News</a></li>
    <li><a href="News/Dealers-in-the-News.html" target="_self">Dealers in the News</a></li>
    <li><a href="News/Company-Fact-Sheet.html" target="_self">Company Fact Sheet</a></li>
    <li><a href="News/Management-Team.html" target="_self">Management-Team</a></li>
    </ul>
    </li>
    <li class="spacer"><img src="images/seperator.gif">
    </li><li><a href="Events.html" target="_self" >Events</a>
    </li>
    <li class="spacer"><img src="images/seperator.gif" width="3" height="35"></li>
    <li><a href="Contact.html" target="_self">Contact</a>
    </li>
    </ul>
    </div>
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Hi

    Can you upload this to a website and post the link for us? Also, what browser(s) does this occur in?

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR

IMN logo majestic logo threadwatch logo seochat tools logo