[div+css]豎排菜單

 

 
           1  
          <! 
          doctype html 
          > 
          
 
           2  
          < 
          html  
          lang 
          ="en" 
          > 
          
 
           3  
          < 
          head 
          > 
          
 
           4      
          < 
          meta  
          charset 
          ="UTF-8" 
          > 
          
 
           5      
          < 
          title 
          >Menu 
          </ 
          title 
          > 
          
 
           6      
          < 
          style 
          > 
          
 
           7  
                  
 
           8  
                  body 
          { 
          
 
           9  
                      background-color 
          : 
           #ffded0 
          ; 
          
 
          10  
                   
          } 
          
 
          11  
                  #box 
          { 
          
 
          12  
                      width 
          : 
          120px 
          ; 
          
 
          13  
                      font-size 
          : 
           12px 
          ; 
          
 
          14  
                      font-family 
          : 
           "宋體" 
          ; 
          
 
          15  
                   
          } 
          
 
          16  
                  #box ul 
          { 
          
 
          17  
                      margin 
          : 
          0px 
          ; 
          
 
          18  
                      padding 
          : 
          0px 
          ; 
          
 
          19  
                      list-style-type 
          : 
           none 
          ; 
          
 
          20  
                   
          } 
          
 
          21  
                  #box li 
          { 
          
 
          22  
                      border-bottom 
          : 
           #ed9f9f solid 1px 
          ; 
          
 
          23  
          
 
          24  
                   
          } 
          
 
          25  
                  #box li a 
          { 
          
 
          26  
                      display 
          : 
           block 
          ; 
          
 
          27  
                      padding 
          : 
           5px 5px 5px 8px 
          ; 
          
 
          28  
                      text-decoration 
          : 
           none 
          ; 
          
 
          29  
                      border-left 
          : 
           12px solid #711515 
          ; 
          
 
          30  
                      border-right 
          : 
           1px solid #711515 
          ; 
          
 
          31  
                   
          } 
          
 
          32  
                   
          /* 
          動態菜單的效果 
          */ 
          
 
          33  
                  #box li a:link 
          { 
          
 
          34  
                      background-color 
          : 
           #c11136 
          ; 
          
 
          35  
                      color 
          : 
          #ffffff 
          ; 
          
 
          36  
                   
          } 
          
 
          37  
                  #box li a:visited 
          { 
          
 
          38  
                      background-color 
          : 
           #c11136 
          ; 
          
 
          39  
                      color 
          : 
          #ffffff 
          ; 
          
 
          40  
                   
          } 
          
 
          41  
                  #box li a:hover 
          { 
          
 
          42  
                      background-color 
          : 
           #990020 
          ; 
          
 
          43  
                      color 
          : 
          #ffff00 
          ; 
          
 
          44  
                   
          } 
          
 
          45  
               
          </ 
          style 
          > 
          
 
          46  
          </ 
          head 
          > 
          
 
          47  
          < 
          body 
          > 
          
 
          48      
          < 
          div  
          id 
          ="box" 
          > 
          
 
          49          
          < 
          ul 
          > 
          
 
          50              
          < 
          li 
          >< 
          a  
          href 
          ="#" 
          >首頁 
          </ 
          a 
          ></ 
          li 
          > 
          
 
          51              
          < 
          li 
          >< 
          a  
          href 
          ="#" 
          >音樂MP3 
          </ 
          a 
          ></ 
          li 
          > 
          
 
          52              
          < 
          li 
          >< 
          a  
          href 
          ="#" 
          >個人相冊 
          </ 
          a 
          ></ 
          li 
          > 
          
 
          53              
          < 
          li 
          >< 
          a  
          href 
          ="#" 
          >我的博客 
          </ 
          a 
          ></ 
          li 
          > 
          
 
          54              
          < 
          li 
          >< 
          a  
          href 
          ="#" 
          >我的空間 
          </ 
          a 
          ></ 
          li 
          > 
          
 
          55          
          </ 
          ul 
          > 
          
 
          56      
          </ 
          div 
          > 
          
 
          57  
          </ 
          body 
          > 
          
 
          58  
          </ 
          html 
          >