Nav Hover Effects Not Lining Up Right

[crossbeats]

I started working for a new company and am trying to clean up the mess of code that was left behind and (unfortunately) I think in my attempts I've made a bigger mess.

 

The main issue I'd like to fix is the hover effects on the Nav bar

 

 

The Accessories dropdown doesn't line up with "Products" above it, and the hover effect on "Contact" doesn't go all the way to the edge of the nav bar.

 

Code is as follows:

HTML:

 

<nav><ul><li><a href="index.htm">Home</a></li><li><a href="products.htm">Products</a><ul><li><a href="accessories.htm">Accessories</a></li></ul></li> <li><a href="clearance.htm">Clearance</a></li><li><a href="requestinfo.htm">Request Info</a></li><li><a href="about.htm">About PACE</a><ul><li><a href="news.htm">News & Events</a></li></ul></li><li><a href="contacts.htm">Contact</a></li></ul></nav>

Edited May 1, 2014 by crossbeats

[crossbeats]

Apparently I can't post HTML and CSS in the same post?

 

Here's the CSS:

 

/* Menu */nav {height: 60px;margin: auto;text-align: center;}nav ul ul {display: none; } nav ul li:hover > ul {display: block;}nav ul {width: 950px;z-index: 101;background: #efefef;background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);     box-shadow: 0px 0px 9px rgba(0,0,0,0.15);list-style: none;position: relative;display: inline-table;padding: auto;margin: 0 5px 0 -5px; }nav ul:after {content: ""; clear: both; display: block;}nav ul li {height: 30px;float: left;margin: auto;padding: auto;position: relative;}nav ul li:hover {background: #263a79;background: linear-gradient(top, #263a79 0%, #10225b 40%);background: -moz-linear-gradient(top, #263a79 0%, #10225b 40%);background: -webkit-linear-gradient(top, #263a79 0%,#10225b 40%);}nav ul li:hover a {  color: #fff;} nav ul li a {height: 30px;margin: 0;display: block;padding: 5px 50px;color: #263a79; text-decoration: none;float: left;}nav ul ul {background: #263a79;border-radius: 0px;padding: 0 -2px 0 -2px;position: absolute;top: 100%;margin: 0 -0.5px 0 0.5px;width: auto;}nav ul ul li {height: auto;float: left;        border-top: 1px solid #6b727c;border-bottom: 1px solid #575f6a;position: relative;z-index: 101;overflow: hidden; }nav ul ul li a {  height: auto;  padding: auto;  color: #fff;  float: left;}      nav ul ul li a:hover {      height: auto;      background: linear-gradient(top, #263a79 0%, #10225b 40%);      padding: auto;      width: auto;  }  nav ul ul ul {position: absolute; left: 100%; top:0;}

[Day]

The problem is that the width of the links are relative to the content inside of them. The content isn't long enough to take up the full width of the container. As for the dropdown, the content in the drop down link is longer than the link it is dropping down under. If you want everything to line up, you'll have to set specific widths for the links instead of just padding.

Edited May 7, 2014 by Day