Solved

Drop Down Menu CSS

Posted on 2014-10-08
5
132 Views
Last Modified: 2014-10-12
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
Comment
Question by:WebDevMarty
  • 4
5 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40368188
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
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40368194
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
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40368199
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
 

Author Closing Comment

by:WebDevMarty
ID: 40375143
Perfect - worked like a charm!!
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 40375427
You are welcome - thanks for the points - have a great day.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question