Solved

Drop Down Menu CSS

Posted on 2014-10-08
5
126 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 52

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 52

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 52

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 52

Expert Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

910 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

22 Experts available now in Live!

Get 1:1 Help Now