Home > Article > Web Front-end > css set web navigation bar

css set web navigation bar

高洛峰Original: 2017-03-27 17:55:562433browse

This article mainly introduces the relevant information of css to set the web navigation bar in detail. Friends who need it can refer to it

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; 
}

The above is the detailed content of css set web navigation bar. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：3D button exquisite effect code implemented using CSS3Next article：3D button exquisite effect code implemented using CSS3

See more

css set web navigation bar

Related articles