CSS Landscape navigation Menu Instance Tutorial

CSS Horizontal navigation menu Instance Tutorial 2, another CSS navigation menu.

 
 

  
  

  
<ul id= "NAV" >
  
  

  
<li><a href= "http://www.alixixi.com/" >div+css tutorials </a></li>
  
  

  
<li><a href= "http://www.alixixi.com/" id= "current" >css layout instance </a></li>
  
  

  
<li><a href= "http://www.alixixi.com/" >css2.0 tutorials </a></li>
  
  

  
<li><a href= "http://www.alixixi.com/" >css Cool Station Appreciation </a></li>
  
  

  
<li><a href= "http://www.alixixi.com/" >css template download </a></li>
  
  

  
<li><a href= "http://www.alixixi.com/" >CSS Online handbook </a></li>
  
  

  
<li><a href= "http://www.alixixi.com/" >web standard </a></li>
  
  

  
<li><a href= "http://www.alixixi.com/" >xhtml tutorials </a></li>
  
  

  
</ul>
 
 

Look at the CSS code:

 
 

  
  

  
* {
  
  

  
font-size:12px;
  
  

  
Text-align:center;
  
  

  
}
  
  

  
#nav {
  
  

  
width:683px;
  
  

  
margin:20px Auto 0 auto;
  
  

  
border:1px solid #ccc;
  
  

  
Border-right:none;
  
  

  
}
  
  

  
#nav Li {
  
  

  
Display:inline;
  
  

  
List-style-type:none;
  
  

  
}
  
  

  
#nav Li A:link, #nav Li a:visited {
  
  

  
Float:left;
  
  

  
PADDING:3PX 10px;
  
  

  
Text-decoration:none;
  
  

  
Color: #bbb;
  
  

  
Background: #f0f0f0;
  
  

  
border-right:1px solid #ccc;
  
  

  
}
  
  

  
#nav Li A:hover {
  
  

  
Color: #fff;
  
  

  
Background: #06c;
  
  

  
}
  
  

  
#nav Li A#current {
  
  

  
Color: #fff;
  
  

  
Background: #f60;
  
  

  
}
 
 

Let's take a look at the important parts of the analysis:

Unordered list The border of UL is the solid line of a pixel, the color is #ccc, but the right border line is none.
This is where the border of our menu element is left.

 
  
  

  
   
   
#nav {
  
   
   
border:1px solid #ccc;
  
   
   
Border-right:none;
  
   
   
}
  
   
   
#nav Li A:link, #nav Li a:visited {
border-right:1px solid #ccc;
}
 
  
  

Link element, we set the right box to a pixel solid line, the color is #ccc.

This forms a closed area as a container for the linked elements. It looks good.

 
  
  

  
   
   
#nav Li A#current {
  
   
   
Color: #fff;
  
   
   
Background: #f60;
  
   
   
}
 
  
  

This represents the attribute with the ID current in the LINK element. The text color is #fff, and the background is #f60.
This setting is something we should remember and it can be set to the ID of the menu for the current page. For example, we are now in the CSS Tutorial section. We set the ID of the CSS Tutorial menu to current. It will be displayed in a different style than the other menu. There are other ways to give the body an ID. That is, you can control the entire page needs to be annotated parts, such knowledge we in the future article is detailed introduction.