Question

I have a navbar that drops down. The parent text is black, when you hover over the parent text it drops down and shows other categories. The text for the categories is also white, is it possible to change the text color in the drop down category text to say white?

The link class looks like this:

a:link {
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

and the navbar code looks like this:

#nav1 {
    /*sets up nav bar*/
    background: url(images/nav1-sep.gif) no-repeat left top;
    font-size: 13px; /*for navbar, code, design..*/
    height: 33px;
}
#nav1 ul.sf-menu li {
    /*separates nav cats*/
    position: relative;
    background: url(images/nav1-sep.gif) no-repeat right top;
    float: left;
    line-height: 37px; /*hover box height*/
    padding: 0 1px 0 0;
    text-align: center;
}
#nav1 ul.sf-menu li {
    /*spaces cats evenly*/
    /*color:#000;text color*/
    display:block ;
    position: relative;
    float: left;
    text-decoration:none;
    width: 127px; /*width of code, design.. placement*/
    cursor: pointer;
}
#nav1 ul.sf-menu li a:hover {
    /*on nav top hover*/
    /*change background color on hover*/
    text-decoration: none;
    background: #FEFEFE;
}

#nav1 ul.sf-menu li ul.children {
    /*drop down semi trans*/
    border: 2px solid #ffffff;
    background: url(images/BG_semi_trans.png) repeat-y top left;
}
#nav1 ul.sf-menu li ul.children li a:hover {
    text-decoration:none;
    filter:alpha(opacity=35);-moz-opacity:.35;opacity:.35;
    /*background:#000000;*/
}

#nav1 ul.sf-menu li ul.children
{
    /*aligns drop down with navbar*/
    margin:5px 0 0 0;
}
#nav1 ul.sf-menu li ul.children ul.children
{
    margin:-1px 0 0 27px;
}

thanks for any help!

Answer 1

You’ll need to use an “a, a:link, a:visited” selector on your children. So something like,

#nav1 ul.sf-menu li ul.children a,
#nav1 ul.sf-menu li ul.children a:link,
#nav1 ul.sf-menu li ul.children a:visited {
     color: white;
}