我已经做了一些额外的学习,但是我似乎无法集中精力进行此代码,并且我不确定是否需要那么多代码,所以觉得应该删除一些代码,请帮忙!
如果有些代码需要删除,我理解只是不太了解,我觉得我阅读的所有内容都让我更加迷茫,只是不断更改我的代码而无解:(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
的HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li><a href="">Home</a><span class="nav-sec">Where We Start</span></li>
<li><a href="">Gallery</a><span class="nav-sec">Pure Beauty</span></li>
<li><a href="">Contact</a><span class="nav-sec">Come Book</span></li>
<li><a href="">Features</a><span class="nav-sec">Pure Luxury</span></li>
<li><a href="">Location</a><span class="nav-sec">Where Are We?</span></li>
<li><a href="">Rates</a><span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
对不起,我对这一切还很陌生
最佳答案
我提供两种解决方案,猜测您需要什么:
Fiddle 1
更改
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
更改
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}