我有一个简单的列表驱动导航,如下所示:
Page 1 Page 2 Page 3 My Account
我需要“我的帐户”才能向右浮动:
Page 1 Page 2 Page 3 My Account
这是清单:
<nav class="nav">
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>My Account</li>
</ul>
</nav>
我在最后一个列表项上添加了一个float:right,最初看起来不错,直到我将屏幕缩小了一点。但是随后它迫使前三个项目略微降低,因此“我的帐户”仍然正确对齐,但比其他三个项目高了一点。像这样:
My Account
Page 1 Page 2 Page 3
之后编辑:
实际的列表比我上面发布的更为复杂。它具有下拉菜单和许多样式。这是CSS:
.nav, .menu {
height: 54px;
}
.nav {
background: #004F9D;
clear: both;
display: block;
position: relative;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul {
background: white;
padding: 0;
position: absolute;
top: 100%;
z-index:1000;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
min-width: 160px;
font-size: 14px;
}
.nav ul ul li {
float: none;
position: relative;
}
.nav ul ul li a {
color: black;
}
.nav ul ul li a:hover {
background: #428BCA;
}
.menu {
clear: both;
display: block;
overflow: hidden;
}
.menu li {
clear: none;
display: block;
float: left;
padding: 10px 0;
}
.menu li img {
padding-right:10px;
}
.menu li:hover {
background-color: #00aedd;
}
.menu a, .menu span {
background-repeat: no-repeat;
clear: both;
display: block;
color: #fff;
font-size: 14px;
height: 34px;
line-height: 35px;
overflow: hidden;
text-decoration: none;
}
.menu a {
padding-left: 15px;
padding-right: 15px;
}
.menu span {
padding-right: 15px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句