css设置网页导航栏
程序员文章站
2022-04-30 14:30:53
...
这篇文章主要为大家详细介绍了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 '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;
}
以上就是css设置网页导航栏的详细内容，更多请关注其它相关文章！