1.包含子导航的导航菜单

效果：

 

参考代码:

html:

      
          
      
        
       
            
        
Recipes                
         
                    
          
Starters
                    
          
Main Courses
                    
          
Desserts
                
         
            
            
        
Contact Us
            
        
Articles
            
        
Buy OnLine
          
       
     
      

css:

@charset "utf-8";/* CSS Document */#navigation{
        width:200px;    font-family:Arial, Helvetica, sans-serif;}#navigation ul{
        list-style-type:none;    margin:0;    padding:0;}#navigation li{
        border-bottom:1px solid #ED9F9F;}#navigation li a:link,#navigation li a:visited{
        display:block;    padding:5px 5px 5px 0.5em;    border-left:12px solid #711515;    border-right:1px solid #711515;    background-color:#B51032;    color:#ffffff;    text-decoration:none;}#navigation li a:hover{
        background-color:#711515;    color:#ffffff;}#navigation ul ul{
        margin-left:12px;}#navigation ul ul li{
        border-bottom:1px solid #711515;    margin:0;}#navigation ul ul a:link,#navigation ul ul a:visited{
        background-color:#ED9F9F;    color:#711515;}#navigation ul ul a:hover{
        background-color:#711515;    color:#ffffff;}

 

 2.标签导航

 效果

 

参考代码：

html:

      
          
      
        
       
Recipes
        
       
Contact Us
        
       
Articles
        
       
Buy OnLine
    
      
    
      
    
       
Recipes
    
       
财富，权力，地位，曾经拥有一切的『海贼王』哥尔·D·罗杰，在临死前留下了一句话，让全世界的人们，趋之若鹜奔向大海：“想要我的财富吗？那就去找吧，我的一切都在那里，在那伟大航路！”于是越来越多的人奔向大海，驶入伟大航路，世界迎来了『大海贼时代』！其中主角蒙其D路飞就是带着自己的梦想奔向大海。有什么理由阻止一个男人为了梦想奔向大海呢？ “ONE PIECE”在故事中为“一个大秘宝”之意。故事描述男主角‘草帽’蒙其·D·路飞为了当上“海贼王”而踏上“伟大航道”及与其伙伴的经历。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”，许多人为了争夺“ONE PIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标当上“海贼王”。
    
      

css:

@charset "utf-8";/* CSS Document */ul#tabnav{
        list-style-type:none;    margin:0;    peadding-left:40px;    padding-bottom:24px;    border-bottom:1px solid #711515;    font-weight:bold;    font-size:11px;    font-family:Arial, Helvetica, sans-serif;}ul#tabnav li{
        float:left;    height:21px;    background-color:#b51032;    color:#ffffff;    margin:2px 2px 0 2px;    border:1px solid #711515;}ul#tabnav a:link,ul#tabnav a:visited{
        display:block;    color:#ffffff;    background-color:transparent;    text-decoration:none;    padding:4px;}ul#tabnav a:hover{
        background-color:#F4869C;    color:#FFFFFF;}body#recipes li.recipes{
        border-bottom:1px solid #fff;    color:#000000;    background-color:#ffffff;}body#recipes li.recipes a:link,body#recipes li.recipes a:visited,body#recipes li.contact a:link,body#recipes li.contact a:visited,body#recipes li.articles a:link,body#recipes li.articles a:visited,body#recipes li.buy a:link,body#recipes li.buy a:visited{
        color:#000000;    background-color:#6699FF;}body#recipes li.recipes a:hover,body#recipes li.contact a:hover,body#recipes li.articles a:hover,body#recipes li.buy a:hover{
        color:#FFFFFF;    background-color:#000099;}