我已经做了一些额外的学习,但是我似乎无法集中精力进行此代码,并且我不确定是否需要那么多代码,所以觉得应该删除一些代码,请帮忙!

如果有些代码需要删除,我理解只是不太了解,我觉得我阅读的所有内容都让我更加迷茫,只是不断更改我的代码而无解:(

#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*/
}

09-29 19:35