asked on

CSS - specify different colour for first list menu?

Hi,
Is there a way I can have the first link "CONTACT US" display in in red?

Thanks,

Andrew

<html>
<head>
<title>Untitled Document</title>

<style type="text/css">


#navbar_bottom {
   margin: 0;
   padding: 0;
   height: 30px; 
}
#navbar_bottom li{
   list-style: none;
   float: right; 
   text-align: center;
   font-size: 12px;
   
}
/* main top menu */
#navbar_bottom li a{
	display: block;
	padding-left: 20px;
	padding-right: 20px;
    color: #ccc;
	height:30px;
	line-height:30px;
	text-decoration: none;
}
/* main top menu hover*/
#navbar_bottom li a:hover {
   color: #000;
}

</style>
</head>

<body>


<div id="menu_bottom"><ul id="navbar_bottom">

<li><a class='main_menu_bot' href=''>CONTACT US</a></li>
<li><a class='main_menu_bot' href=''>JOBS + TRAINING</a></li>
<li><a class='main_menu_bot' href=''>RETAIL</a></li>

 
</ul></div>

</body>
</html>

Open in new window

dustock

li:first-child {
color:red;
}

Open in new window

Juan Ocasio

<html>
<head>
<title>Untitled Document</title>

<style type="text/css">

#navbar_bottom {
margin: 0;
padding: 0;
height: 30px;
}
#navbar_bottom li{
list-style: none;
float: right;
text-align: center;
font-size: 12px;

}
/* main top menu */
#navbar_bottom li a{
      display: block;
      padding-left: 20px;
      padding-right: 20px;
color: #ccc;
      height:30px;
      line-height:30px;
      text-decoration: none;
}
/* main top menu hover*/
#navbar_bottom li a:hover {
color: #000;
}

</style>
</head>

<body>

<div id="menu_bottom"><ul id="navbar_bottom">

<li><a class='main_menu_bot' href=''>CONTACT US</a></li>
<li><a class='main_menu_bot' href=''>JOBS + TRAINING</a></li>
<li><a class='main_menu_bot' href=''>RETAIL</a></li>

</ul></div>

</body>
</html>

Juan Ocasio

Or you can use color:red in another class:

<html>
<head>
<title>Untitled Document</title>

<style type="text/css">

#navbar_bottom {
margin: 0;
padding: 0;
height: 30px;
}
#navbar_bottom li{
list-style: none;
float: right;
text-align: center;
font-size: 12px;

}
/* main top menu */
#navbar_bottom li a{
display: block;
padding-left: 20px;
padding-right: 20px;
color: #ccc;
height:30px;
line-height:30px;
text-decoration: none;
}
/* main top menu hover*/
#navbar_bottom li a:hover {
color: #000;
}
.red{
Color:red;}
</style>
</head>

<body>

<div id="menu_bottom"><ul id="navbar_bottom">

<li><a class='main_menu_bot red' href=''>CONTACT US</a></li>
<li><a class='main_menu_bot' href=''>JOBS + TRAINING</a></li>
<li><a class='main_menu_bot' href=''>RETAIL</a></li>

</ul></div>

</body>
</html>

sabecs

ASKER

Thanks for your feedback, I tried all suggestions above but none of them worked when testing in IE & Firefox?

Juan Ocasio

Where is the main_menu_bot class defined?

ASKER CERTIFIED SOLUTION

Juan Ocasio

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sabecs

ASKER

Thanks jocasio123, that's perfect...