Drop Down Menu CSS

Working on the drop=down menu here:

The Reineke Group

And two things have me frustrated. One, the top menu item loses its' hover value once you start rolling over the drop down items and two, when you hover over a top menu item, the menu items to the right shift a bit.

It is possible to review the CSS and provide some insight as to how to eliminate these issues?

Thank you in advance,

"http://cjtdigital.com/reineke/wp-content/themes/design/style.css"CSS here
WebDevMartyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
The shifting is caused by this property in the hover style
ul.nav li a:hover {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #b5b5b5;
  border-color: -moz-use-text-color #9a9a9a #9a9a9a;
  border-image: none;
  border-right: 1px solid #9a9a9a;
  border-style: none solid solid;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-width: medium 1px 1px; /* <===== THE CULPRIT */
  box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 0 #eeeeee;
}

Open in new window


Looking at the other item now
0
Julian HansenCommented:
The other problem (lost hover) is because you are applying the style to the <a> element inside the <li> instead of the <li> element that contains both the <a> and the sub-menu <ul>

Because the <a> and <ul> elements are both children of the <li> if the hover is on the parent <li> then the hover state will remain as you move down the pull down - css to follow
0
Julian HansenCommented:
To fix hover
change the ul.nav li a:hover to
ul.nav li:hover {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #b5b5b5;
  border-color: -moz-use-text-color #9a9a9a #9a9a9a;
  border-image: none;
  border-style: none solid solid;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-width: medium 1px 1px;
  box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 0 0 #eeeeee;
}

Open in new window

And add this
ul.nav li a:hover {
 text-decoration: none;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WebDevMartyAuthor Commented:
Perfect - worked like a charm!!
0
Julian HansenCommented:
You are welcome - thanks for the points - have a great day.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.