css设置网页导航栏

这篇文章主要为大家详细介绍了css设置网页导航栏的相关资料,需要的朋友可以参考下

8款经典的css网站顶部导航栏样式

8款经典的css网站顶部导航栏样式，顶部导航菜单特效，各种下拉菜单布局效果。

下载

html页面：
 
 
 
     
           
     
        
 
 
    
 
        
 
            
 
                首页 
            
 
            
 
                风雨 
            
        
            
 
                飘 
            
 
        
 
    
  
 

css文件： 
/*** ESSENTIAL STYLES ***/ 
.nav, .nav * { 
    margin:         0; 
    padding:        0; 
    list-style:     none; 
} 
.nav { 
    line-height:    1.0; 
} 
.nav ul { 
    position:       absolute; 
    top:            -999em; 
    width:          13em; /* left offset of submenus need to match (see below) */ 
} 
.nav ul li { 
    width:          100%; 
} 
.nav li:hover { 
    visibility:     inherit; /* fixes IE7 'sticky bug' */ 
} 
.nav li { 
    float:          left; 
    position:       relative; 
} 
.nav a { 
    display:        block; 
    position:       relative; 
} 
.nav li:hover ul, 
.nav li.sfHover ul { 
    left:           0; 
    top:            36px; /* match top ul list item height */ 
    z-index:        99; 
} 
ul.nav li:hover li ul, 
ul.nav li.sfHover li ul { 
    top:            -999em; 
} 
ul.nav li li:hover ul, 
ul.nav li li.sfHover ul { 
    left:           13em; /* match ul width */ 
    top:            0; 
} 
ul.nav li li:hover li ul, 
ul.nav li li.sfHover li ul { 
    top:            -999em; 
} 
ul.nav li li li:hover ul, 
ul.nav li li li.sfHover ul { 
    left:           13em; /* match ul width */ 
    top:            0px; 
} 
 
/*** DEMO SKIN ***/ 
.nav { 
    float:  left; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 14px; 
} 
.nav a { 
    padding: 1em 1.1em 1em 1.1em; 
    text-decoration:none; 
    background: url("22.png") no-repeat -1px 0px; 
} 
 
 
.nav a, .nav a:visited  { /* visited pseudo selector so IE6 applies text colour*/ 
    color: #333; 
    font-weight: 800; 
} 
 
.nav li { 
    /*background: url("../images/menu_divider.png") no-repeat -1px 0px;*/ 
    /*background: url("11.png") no-repeat -1px 0px;*/ 
} 
 
.nav li:hover a { 
    color: #eee; 
} 
 
.nav li li a { 
    background: #333; 
     
} 
.nav li li a:hover { 
    text-decoration: underline; 
} 
.nav li ul { 
    background: #000; 
} 
 
.nav li:hover, .nav li.sfHover, 
.nav a:focus, .nav a:hover, .nav a:active { 
    outline: 0; 
    color: #fff; 
    background: #0088ff;/*鼠标划过或者激活*/ 
} 
 
.nav li ul li:hover, .nav li ul li.sfHover, 
.nav li ul li a:focus, .nav li ul li a:hover, .nav li ul li a:active { 
    outline: 0; 
    color: #fff; 
} 
 
.nav li.current_page_item, 
.nav li.current-cat { 
    background: #333; 
} 
 
.nav li.current_page_item a, 
.nav li.current-cat a { 
    color: #fff; 
}