嗨我正在寻找一个类似于雅虎的导航栏,但是我找不到一个例子。我正在寻找的一些功能是一个粘性导航栏,当用户滚动时,它看起来像是从它的位置弹出。
CSS
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body {
font: 62.5% Arial, Helvetica, sans-serif;
background: #FFFFFF;
}
ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a img { border: none; }
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
a {
text-decoration: none;
outline: none;
color: #335588;
}
a:hover {
text-decoration: underline;
}
#top-bar {
background: #330000;
min-height: 60px;
padding: 0 10px;
font-size: 1.3em;
font-weight: bold;
}
#right-side {
float: right;
padding-top: 15px;
}
#right-side img {
border: 1px solid white;
vertical-align: middle;
}
#right-side a {
color: white;
border-left: 1px solid white;
height: 10px;
padding-left: 10px;
}
#right-side a.first {
border: none;
padding: 0;
}
#left-side {
float: left;
padding-top: 15px;
padding-left: 20px;
color: white;
font-size: 20px;
}
#sub-menu {
background: white;
min-height: 20px;
padding: 5px 10px 0 10px;
}
#sub-menu ul {
display: block;
color: #000000;
}
#sub-menu ul li {
height: 18px;
padding: 5px 10px 0 5px;
position: relative;
float: left;
margin-right: 10px;
color: #000000;
}
#sub-menu ul li:hover {
background: red;
height: 10px;
}
#sub-menu ul li a {
display: block;
float: left;
height: 23px;
position: relative;
top: -5px;
right: -5px;
padding-right: 3px;
color: #000000;
font-weight: bold;
font-size: 1.1em;
text-decoration: none;
}
#sub-menu ul li a span {
position: relative;
top: 6px;
}
#sub-menu ul li ul {
display: none;
position: absolute;
top: 29px;
left: 0px;
width: 150px;
border: 1px solid #ccc;
background: white;
padding: 10px 0 0 0;
}
#sub-menu ul li ul li {
float: none;
padding: 0; margin: 0;
height: 100%;
}
#sub-menu ul li ul li:hover {
background: none;
}
#sub-menu ul li ul li a {
display: block;
float: none;
margin-left: -5px;
padding: 5px 0 0 10px;
width: 140px;
}
#sub-menu ul li ul li a:hover {
background: #000000;
}
HTML
<div id="top-bar">
<img src="images/logo.png" alt="TEST" class="floatleft" />
<div id="left-side">
TEST
</div>
<div id="right-side">
<a href="#">Logout</a>
</div>
</div>
<div id="sub-menu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
这是一个更新的 jsfiddle,我得到了显示的线路,但它仍然不会粘 jsfiddle.net/cc48t/1549