我有这个css:
.vertical-nav {
height:35px;;
list-style:none;
width: 100%; /******* MODIFIED ********/
margin-top:0;
margin-bottom:35px;
padding:0;
background:#03F;
}
.vertical-nav li {
height: 25px;
margin: 0;
text-align:center;
padding: 5px 0;
background-color: #03F;
border: none;
display: inline-block;
float: left;
width: 120px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#000000;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#000000;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.vertical-nav li:hover .sub-menu
{
display: table;
}
.sub-menu li
{
width: 100%;
min-width: 180px;
white-space: nowrap;
display:table-row;
z-index:1;
position:relative;
}
.sub-menu li a
{
display:inline-block;
padding: 0 10px;
}
菜单是页面的100%宽度,所以我需要将链接置于页面中心
这是一个jsFiddle所以你可以看到HTML Too和功能齐全的菜单:http://jsfiddle.net/rspc3/
答案 0 :(得分:1)
将text-align:center;
规则从.vertical-nav li
移至.vertical-nav
并移除float: left;
上的.vertical-nav li
<强> jsFiddle example 强>
答案 1 :(得分:0)
这将完美地运作
<ul id="nav">
<li><a href="/">Link 1</a></li>
<li><a href="/about/">Link 2</a></li>
<li><a href="/portfolio/">Link 3</a></li>
</ul>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
答案 2 :(得分:0)
将CSS替换为:
.vertical-nav {
height:35px;;
list-style:none;
width: 100%; /******* MODIFIED ********/
margin-top:0;
margin-bottom:35px;
padding:0;
background:#03F;
text-align:center;
padding-top:10px;
}
.vertical-nav li {
height: 25px;
margin: 0;
text-align:center;
padding: 5px 0;
background-color: #03F;
border: none;
display: inline;
float: none;
margin:0px 30px 0px 0px;
width: 120px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#000000;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#000000;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.vertical-nav li:hover .sub-menu
{
display: table;
}
.sub-menu li
{
width: 100%;
min-width: 180px;
white-space: nowrap;
display:table-row;
z-index:1;
position:relative;
}
.sub-menu li a
{
display:inline-block;
padding: 0 10px;
}