不需要JS支持的高级导航栏
支持IE7 FF目前不支持IE6<style type="text/css">
body,td,th,input {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bar {
background:#E8E8E8;
border-top:1px solid #FFF;
border-bottom:1px solid #CCC;
height:25px;
margin:0;
cursor:default;
}
#bar ul {
list-style:none;
margin:0;
padding:0;
}
#bar li {position:relative}
#bar li,
#bar li:visited,
#bar li:hover,
#bar li:active {
margin-right:5px;
line-height:25px;
display:inline;
padding:4px 7px;
width:300px;
color:#000;
text-decoration:none;
}
#bar li:hover,
#bar li:focus {
color:#FFF;
background:#006;
}
.menu {
visibility:hidden;
position:absolute;
top:23px !important;
top:24px;
left:0;
background:#E8E8E8;
border:1px solid #CCC;
padding:1px;
}
#bar li:hover .menu,
#bar li:focus .menu {visibility:visible}
.menu a:link,
.menu a:visited,
.menu a:hover,
.menu a:active {
color:#000;
text-decoration:none;
display:block;
height:25px;
padding:0 30px;
cursor:default;
}
.menu dd {
margin:0;
color:#000;
height:25px;
}
.menu dd:hover a,
.menu dd:focus a {
color:#FFF;
background:#006;
}
</style>
<div id="bar">
<ul>
<li>File
<dl class="menu">
<dd><a href="logout.php">Close</a></dd>
</dl>
</li>
<li>Edit
<dl class="menu">
<dd><a href="configuration.php">Configuration</a></dd>
</dl></li>
<li>Tools
<dl class="menu">
<dd><a href="update.php">Update</a></dd>
<dd><a href="options.php">Options</a></dd>
</dl></li>
<li>Help
<dl class="menu">
<dd><a href="content.php">Content</a></dd>
<dd><a href="about.php">About</a></dd>
</dl></li>
</ul>
</div>
页:
[1]