Solved

Drop Down Menu CSS

Posted on 2014-10-08
5
123 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 51

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 51

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 51

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 51

Expert Comment

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

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now