Extending the "trigger area" that activates the dropdown menu. - css
Currently, only when the mouseover occurs near the phone icon or the little arrow-up area, will the dropdown menu not disappear when you move your cursor down to click on the links in the dropdownmenu.
When someone mouses over from the word 'Contact', the dropdown menu disappears as soon as he moves the cursor. I want the dropdown menu to remain as user moves the cursor down from the word 'Contact' .
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style2.css" type="text/css" />
</head>
<body>
<div class="Navigation">
<div id="navbar">
<ul>
<li class="OP" id="OPM1"><img src="images/order.png" />Orders</li>
<li class="OP"><img src="images/contact.png" />Contact
<div class="extended">
<div class="arrow-up"></div>
<ul class="smallNav">
<li>+65-65553333</li>
<li>Facebook</li>
<li>Twitter</li>
<li>enquiry [at] foodstant [dot] com</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
.Navigation { background:background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
box-shadow: -3px -5px 10px #888888;
font-size: 26px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.Navigation ul li { position: relative; list-style: none; padding: 17px 10px; }
.Navigation ul li a { font-size: 26px; font-weight: bold; color: white; text-decoration: none; text-shadow: 0 1px 2px black; }
.Navigation ul li:hover { background: url(images/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4;}
.Navigation ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; }
.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; }
.Navigation ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(images/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; }
.Navigation ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); }
.Navigation ul li .extended a { font-size:14px;}
.Navigation ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(images/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.Navigation ul li .extended span { padding-left: 10px; font-size: 11px; }
.Navigation ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50); padding: 10px; height: 100px; }
.Navigation ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(images/linkback.png) no-repeat; }
.extended ul li {float:left;}
.Navigation ul li .extended ul.smallNav li:first-child { margin: 0; }
.Navigation ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; }
.Navigation ul li:hover .extended { display: block; }
.Navigation ul li ul li:hover a { color: white; }
#navbar {
}
#navbar ul {
list-style-position:inside;
padding-top: 10px;
padding-bottom: 10px;
}
#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
padding-left: 15px;
}
#navbar ul li.OP img {
vertical-align: middle;
}
#navbar li a:link {
color: #EF174A;
}
#navbar li a:visited {
color: #BF4100;
}
#navbar li a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
#navbar li a:active {
color: #918FBC;
}
li a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
.Navigation ul li .extended ul.smallNav li a { color: #c7c7c7 !important; text-shadow: none !important; }
.Navigation ul li .extended ul.smallNav li a:hover { color: white !important;}
Wrap the arrow-up DIV with another DIV like this:
<div class="arrow-container"><div class="arrow-up"></div></div>
Then add the arrow-container style as:
.arrow-container { margin-top:-16px; height:16px; }
Related
CSS hover over wide
Current my mouse pointer if there is point out of the red colour box it still doing the hover function, but what i need is i only need the hover in red colour box, it out of the box it will hide the menu.
This is the my source from JSfiddle http://jsfiddle.net/KECN7/
This is my html source code
<ul id="menu">
<li>
<ul>
<li>Logout</li>
<li>Account Settings</li>
<li>Terms & Policies</li>
</ul>
</li>
</ul>
this is css source code
#menu{
/*width: 50%;*/
margin: 0;
padding: 10px 0 0 0;
list-style: none;
position: absolute;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
z-index: 99;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 10px 0 25px 0;
/*width: 50px;*/
padding: 0;
display: none;
position: absolute;
top: 20px;
right: 10px;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 15px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 100px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a.btn-function {
background-image: url(../ovolo/img/btn_function.png);
background-color: red;
background-size: 27px;
background-repeat: no-repeat;
display: block;
position: relative;
margin: 0px 5px 0 90px;
float: left;
}
The problem is you are applying the red box to the a element, but taking action on the (larger) li parent element.
You can change your selector to (Fiddle):
#menu li a:hover + ul, #menu li a + ul:hover{
display: block;
z-index: 99;
}
This is not a perfect fix because of the dead space between the a and the ul though, the best option would be to make the a take up the entire space of the li.
CSS - how do i stretch the background of the menu
Hello,
Can someone help me, how can i stretch the background of the menu (to be full width, from left to right)?
I'm a beginner.
Thanks.
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width:100%;
margin: 0px;
background-color: #3d56ac;
background-image: linear-gradient(#444, #111);
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #FFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #111;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
This should work:
#menu {
background-size: 100%;
}
You need to fix the width of the image... if your want to Stretch the background image...
**CSS**
background-image: url("menu.png");
background-size: 875px 125px;
background-repeat: no-repeat;
Hope this will helps you...
or you can try...
/css
body{margin: 0 auto;}
.menu100percent {
background: #3584b4; /* Old browsers */
background: -moz-linear-gradient(top, #3584b4 0%, #25567f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3584b4), color-stop(100%,#25567f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3584b4 0%,#25567f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3584b4 0%,#25567f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3584b4 0%,#25567f 100%); /* IE10+ */
background: linear-gradient(to bottom, #3584b4 0%,#25567f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3584b4', endColorstr='#25567f',GradientType=0 ); /* IE6-9 */
color: white;
font-size: 16px;
height: 37px;
width:100%;
}
.menu{width:1000px; margin: 0 auto; }
.menu a{color:#fff; font-size:12px; line-height:37px; font-family:Arial; text-decoration:none;}
/html
<div class="menu100percent">
<div class="menu">
Shop
</div>
</div>
DEMO HERE
CSS: how to add a down arrow for the active link
![enter image description here][1]I have the following CSS navigation that adds an arrow on hover.
How can add an arrow to be visible for the active or on link? i have attached the image as well
Here is my code below
<style type="text/css">
#nav {
margin-top:0;
padding: 12px 0;
margin-left: 0;
background-color: #fafafa;
color: #464646;
-moz-box-shadow: 0 5px 5px #888;
-webkit-box-shadow: 0 5px 5px #888;
box-shadow: 0 5px 5px #888;
}
#nav li {
list-style: none;
display: inline;
margin: 0px;
padding: 0;
padding: 22px;
padding-right: 0;
padding-left: 0;
}
#nav li a {
font-family: Arial;
font-style:normal;
text-transform: uppercase;
text-decoration: none;
color: #464646;
padding: .7em 3em;
border-right: 1px dashed #959595;
}
#nav li a:hover {
background-color: #fafafa;
color: #005596;
font-weight: bold;
}
#nav li:hover {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
}
</style>
HTML
<ul id="nav">
<li id="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Add a Restaurant</li>
<li>Delete a Restaurant</li>
<li>Logout</li>
</ul>
Use a class name instead if an id:
<li class="active">Home</li>
Then you can do:
#nav li.active {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
Just add a background image to css.
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
background: transparent url(images/down_arrow2.png) no-repeat center bottom;
margin: 0;
}
How do I make my navbar expand/extend the entire page?
I have purchased the following wordpress theme: http://themeforest.net/item/healthpress-health-and-medical-wordpress-theme/full_screen_preview/3138064
I need to make the navbar extend along the entire width of page, can someone help? Here's an image to show what i'm trying to do and Here's the CSS code for the navbar.
http://i.stack.imgur.com/ZLdsF.jpg
#header .main-nav {
height: 21px;
width: 100%;
padding: 0px 0px 20px 0px;
margin-top: 90px;
background-color:#46a1b4;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,0))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* FF3.6 */
background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* IE10 */
background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* Opera 11.10+ */
background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0));
}
.ie7 #header .main-nav{ z-index:9600; }
.page-template-template-home-with-sidebar-php #header .main-nav,
.page-template-template-home-php #header .main-nav{ background-clip: padding-box; -moz-background-clip: padding-box; -webkit-background-clip: padding; position: absolute; left: 0px; bottom: 0px; border-radius: 3px 3px 0px 0px; -moz-border-radius: 3px 3px 0px 0px; -webkit-border-radius: 3px 3px 0px 0px; }
#header .main-nav > ul { float: left; }
.ie7 #header .main-nav > ul { z-index:9700; }
#header .main-nav > ul > li { float: left; border-right: 1px solid #54aec2; position: relative; }
#header .main-nav > ul > li:first-child { border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; }
#header .main-nav > ul > li:last-child { border: none; }
#header .main-nav ul li a { display: inline-block; padding: 0px 20px; font-size: 13px; line-height: 41px; text-align: center; color: #fff; text-shadow: 1px 1px 0px #20606d; }
#header .main-nav ul li:hover { background-color: #377f8f; background-clip: padding-box; -moz-background-clip: padding-box; }
#header .main-nav ul li ul { display: none; width: 220px; padding: 12px 0px; background-color: #377f8f; position: absolute; top: 41px; left: 0px; z-index: 8899; border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; }
.ie7 #header .main-nav ul li ul{ z-index:9800; }
#header .main-nav ul li ul li { width: 196px; height: 34px; padding: 0px 12px; position: relative; }
#header .main-nav ul li ul li a { display: inline-block; line-height: 34px; padding: 0px 9px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#header .main-nav ul li ul li:hover { background-color: #2c6774; }
#header .main-nav ul li ul li ul { top: -12px; left: 220px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.ie7 #header .main-nav ul li ul li ul { z-index:9900; }
#header .main-nav .responsive-nav { display: none; width: 100%; margin:10px auto 0px; padding:5px; border:1px solid #CCC; }
Any help will be highly appreciated.
This will do the trick.
#header {
width: 100%;
height: 150px;
margin: 0px auto;
position: relative;
}
The width of the nav bar is set to be 100%, but it is contained within the header tag which has a width of 980px. The only solution via CSS overrides would be to change the width of the header tag to be 100%, which would impact the layout of the entire top portion of your website. I recommend putting your overrides in a child theme. https://codex.wordpress.org/Child_Themes
Drop-down menu with hovering parent item
I want simple drop-down menu. But I have one problem. I want when I hover over dropped items (drop-menu-items) my parent element (drop-menu-parent) to be colored with black, but it's in white. I can't explain it very well. You can see it here -> http://jsfiddle.net/YEyuP/
I think this is what you need : http://jsfiddle.net/YEyuP/6/
HTML:
<nav>
<ul id="cat-nav">
<li>About</li>
<li>Contact</li>
<li class="drop-menu-parent">
Portfolio
<ul class="drop-menu-items">
<li>Some other category</li>
<li>Some other category</li>
<li>Some other category</li>
<li>Some other category</li>
</ul>
</li>
<li>Testimonials</li>
<li>Browse Products</li>
<li>Support Forum</li>
</ul>
</nav>
CSS:
nav {
background: #000;
}
#cat-nav {
text-align: center;
background-color: #0f0609, #0f0609;
background-image: url(cat-nav-bg.jpg), url(cat-nav-bg-bottom.jpg);
background-repeat: no-repeat, repeat-y;
margin-top: -8px;
display: block;
}
#cat-nav:after {
content: " ";
display: block;
clear: both;
width: 81%;
padding-top: 8px;
margin: 0 auto;
background: url(teeth.png) repeat-x;
}
ul#cat-nav > li {
text-align: center;
display: inline-block;
}
#cat-nav a:link { color: #fff; text-decoration: none; padding: 10px; display: inline-block;}
#cat-nav a:hover { color: #fff; text-decoration: none; }
#cat-nav a:visited { color: #fff; text-decoration: none; }
#cat-nav a:active { color: #fff; text-decoration: none; }
ul .drop-menu-items {
position: absolute;
display: none;
background: #fff url(drop-menu-bg.png) bottom repeat-x;
-webkit-box-shadow: 0px 5px 5px #8f8f8f;
-moz-box-shadow: 0px 5px 5px #8f8f8f);
box-shadow: 0px 5px 5px #8f8f8f;
border-radius: 0 10px 10px 10px;
}
ul.drop-menu-items li{
background: url(drop-menu-bullet.png) no-repeat 5px center;
float: none;
position: relative;
color: #000;
padding: 5px 15px;
margin: 0 10px;
border-bottom: 1px dotted #cecece;
}
ul.drop-menu-items li:hover {
background: #f0f0f0 url(drop-menu-bullet.png) no-repeat 5px center;
}
.drop-menu-parent:hover .drop-menu-items {
display: block;
z-index: 1000;
}
#cat-nav > li:hover a{
color:#000;
}
ul#cat-nav li a:hover {
background: #fff;
border-radius: 5px;
/* padding-top: 5px; */
}
#cat-nav .drop-menu-items li a {
color: #000;
}
#cat-nav .drop-menu-items li:hover a {
text-decoration: underline;
background: none;
color: #000;
}
.drop-menu-parent:hover {
background: #fff;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
explanation
What i have added is this :
#cat-nav > li:hover a{
color:#000;
}
'>' indicates a direct child...so the direct child of #cat-nav when hovered over will assign a black color to the tag.
You could have also written : #cat-nav .drop-menu-parent:hover > a { color:#000; }
And it would have worked just as well...Infact, this second bit is a better option.
Add:
ul#cat-nav li:hover a{
color: #000;
}
Not sure if I understood you right(?), but here's an example. Is this what you mean? jsFiddle
nav {
background: #000;
}
#cat-nav {
text-align: center;
background-color: #0f0609, #0f0609;
background-image: url(cat-nav-bg.jpg), url(cat-nav-bg-bottom.jpg);
background-repeat: no-repeat, repeat-y;
margin-top: -8px;
display: block;
}
#cat-nav:after {
content: " ";
display: block;
clear: both;
width: 81%;
padding-top: 8px;
margin: 0 auto;
background: url(teeth.png) repeat-x;
}
ul#cat-nav > li {
text-align: center;
display: inline-block;
}
#cat-nav a:link { color: #fff; text-decoration: none; padding: 10px; display: inline-block;}
#cat-nav a:hover { color: #fff; text-decoration: none; }
#cat-nav a:visited { color: #fff; text-decoration: none; }
#cat-nav a:active { color: #fff; text-decoration: none; }
ul .drop-menu-items {
position: absolute;
display: none;
background: #000 url(drop-menu-bg.png) bottom repeat-x;
-webkit-box-shadow: 0px 5px 5px #8f8f8f;
-moz-box-shadow: 0px 5px 5px #8f8f8f);
box-shadow: 0px 5px 5px #8f8f8f;
border-radius: 0 10px 10px 10px;
}
ul.drop-menu-items li{
background: url(drop-menu-bullet.png) no-repeat 5px center;
float: none;
position: relative;
color: #000;
padding: 5px 15px;
margin: 0 10px;
border-bottom: 1px dotted #cecece;
}
ul.drop-menu-items li:hover {
background: #000 url(drop-menu-bullet.png) no-repeat 5px center;
}
.drop-menu-parent:hover .drop-menu-items {
display: block;
z-index: 1000;
}
ul#cat-nav li a:hover {
background: #000;
border-radius: 5px;
color: #fff;
/* padding-top: 5px; */
}
#cat-nav .drop-menu-items li a {
color: #fff;
}
#cat-nav .drop-menu-items li:hover a {
text-decoration: underline;
background: none;
color: #fff;
}
.drop-menu-parent:hover {
background: #000;
background-color: #000;
border-radius: 5px 5px 0 0;
}