[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 160
  • Last Modified:

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
0
WebDevMarty
Asked:
WebDevMarty
  • 4
1 Solution
 
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
 
WebDevMartyAuthor Commented:
Perfect - worked like a charm!!
0
 
Julian HansenCommented:
You are welcome - thanks for the points - have a great day.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now