首頁 > 文章 > web前端 > css設定網頁導覽欄

css設定網頁導覽欄

高洛峰原創: 2017-03-27 17:55:562511瀏覽

這篇文章主要為大家詳細介紹了css設定網頁導覽列的相關資料,需要的朋友可以參考下

html页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN"> 
<head profile="http://gmpg.org/xfn/11"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>FreeBSD</title>       
    <link rel="stylesheet" type="text/css" media="all" href="./css/style.css"> 
    <link rel="stylesheet" id="superfish-css" href="./css/superfish.css" type="text/css" media="all">    
</head> 
<body> 
    <div class="menu-header"> 
        <ul id="menu-%e5%af%bc%e8%88%aa" class="nav sf-js-enabled"> 
            <div id="home_btn"> 
                <a href="#">首页</a> 
            </div> 
            <li> 
                <a href="#">风雨</a> 
            </li>        
            <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"> 
                <a href="#">飘</a> 
            </li> 
        </ul> 
    </div>  
</body> 
</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 &#39;sticky bug&#39; */ 
} 
.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; 
}

以上是css設定網頁導覽欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用CSS3實現的3D按鈕精美效果代碼下一篇：使用CSS3實現的3D按鈕精美效果代碼

看更多