Jump to content
Sign in to follow this  
crossbeats

Nav Hover Effects Not Lining Up Right

Recommended Posts

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>

post-173036-0-51788500-1398948461_thumb.jpg

Edited by crossbeats

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

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 by Day

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...