2014-05-06 93 views
1

我在對齊中心的導航欄時遇到問題。我嘗試了很多,但似乎沒有任何工作。如果有人需要更多信息,下面還有一個小提琴。感謝HTML + CSS導航問題

<nav> 
<ul class="navigation"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="biography.html">Biography</a></li> 
    <li><a href="media.html">Media</a> 
     <ul> 
      <li><a href="media.html">Pictures</a></li> 
      <li><a href="media.html">Videos</a></li> 
    </ul> 
    </li> 
    <li><a href="tour.html">Tour</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    </ul> 
</nav> 

nav { 
    height: 100px; 
    text-align:center; 
    list-style: none; 
    width: 1024px; 

} 
nav ul ul { 
    display: none; 
    padding: 0; 
    position: absolute; 
    top: 10%; 


} 

    nav ul li:hover > ul { 
     display: block; 

    } 


nav ul { 

    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    position: relative; 

} 
    nav ul:after { 
     clear: both; 
     content: ""; 
     display: block; 

    } 

    nav ul li { 
     float: left; 
     width: 100px; 

    } 
     nav ul li:hover { ; 

     } 
      nav ul li:hover a { 

      } 

     nav ul li a { 
      display: block; 
      padding: 25px 40px; 
      text-decoration: none; 
      width: 0; 
     } 


    nav ul ul { 
     float: none; 
     padding: 0; 
     position: absolute; top: 50%; 
    } 
     nav ul ul li { 
      float: none; 
      position: relative; 


     } 
      nav ul ul li a { 
       padding: 15px 40px; 


      } 

http://jsfiddle.net/qpPww/

任何幫助將不勝感激,謝謝。

回答

1

加這個margin:0 auto; CSS的HTML 身體標籤**

body { 
    color: #001133; 
    font-family: Georgia,"Times New Roman",Times,serif; 
    font-size: 10px; 
    margin: 0 auto; 
} 

Demo Fiddle

我希望這可以幫助你!

+0

歡呼更換你的CSS!問題現在排序 – user3604796

+0

我很高興它幫助你,你是否介意接受答案,如果它真的幫助你。 @ user3604796 –

0

嘗試下面

.navigation {width: 600px;height: 100px;} 

nav ul {list-style: none;padding: 0px;position: relative;margin: auto auto !important;}