?
Solved

CSS - specify different colour for first list menu?

Posted on 2013-06-03
7
Medium Priority
?
234 Views
Last Modified: 2013-06-03
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

0
Comment
Question by:sabecs
  • 4
  • 2
7 Comments
 
LVL 9

Expert Comment

by:dustock
ID: 39217403
li:first-child {
color:red;
}

Open in new window

0
 
LVL 15

Expert Comment

by:Juan Ocasio
ID: 39217420
<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>
0
 
LVL 15

Expert Comment

by:Juan Ocasio
ID: 39217440
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>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:sabecs
ID: 39217506
Thanks for your feedback, I tried all suggestions above but none of them worked when testing in IE & Firefox?
0
 
LVL 15

Expert Comment

by:Juan Ocasio
ID: 39217571
Where is the main_menu_bot class defined?
0
 
LVL 15

Accepted Solution

by:
Juan Ocasio earned 2000 total points
ID: 39217604
Try this:

<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;
      }

      #navbar_bottom li a.red {
         color: #f00;}
      #navbar_bottom li a.red:hover {
         color: #000;}
   </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>

Open in new window

0
 

Author Closing Comment

by:sabecs
ID: 39217682
Thanks jocasio123, that's perfect...
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…
Suggested Courses
Course of the Month17 days, 13 hours left to enroll

829 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