2017-09-06 12 views
2

CSS/HTMLが新しく、ドロップダウンメニューを使って水平方向にナビゲートしようとしています。私はnavを作ったが、私はそれをページに集中させるのが難しい。HTML Horizo​​ntal Nav Center

#NavigationTop ul{ 
 
    list-style: none; 
 
    position:relative; 
 
    margin:0 auto; 
 
    padding-right: 1px; 
 
    width: 1075px; 
 
} 
 

 
#NavigationTop ul a{ 
 
    color:#ffffff; 
 
    text-decoration:none; 
 
    font-weight:700; 
 
    font-size:15px; 
 
    padding:0 15px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    line-height: 50px; 
 
    text-transform: uppercase; 
 
} 
 

 
#NavigationTop ul li{ 
 
    background-color: #343434; 
 
    width: 215px; 
 
    height: 50px; 
 
    position:relative; 
 
    float: left; 
 
    margin:0 auto; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
#NavigationTop ul li:hover{ 
 
    background-color: lightseagreen; 
 
} 
 
#NavigationTop ul li a:visited{ 
 
    color: #ffffff 
 
} 
 

 
#NavigationTop ul ul{ 
 
    display:none; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    padding:0; 
 
    margin: 0; 
 
} 
 

 
#NavigationTop ul ul li{ 
 
    float:none; 
 
    width:215px; 
 
    border-bottom: 1px solid; 
 
} 
 

 
#NavigationTop ul li:hover > ul{ 
 
    display: block; 
 
}
<nav id="NavigationTop"> 
 
    <div id="main-nav"> 
 
    <ul> 
 
     <li><a href="index.html">HOME</a></li> 
 
     <li><a href="bio/index.html">BIOGRAPHY</a></li> 
 
     <li><a href="discography/index.html" class="disco">DISCOGRAPHY</a></li> 
 
     <li><a href="media/index.html">MEDIA</a> 
 
     <ul> 
 
      <li><a href="#">Audio</a> 
 
      <li><a href="#">Video</a> 
 
      <li><a href="#">Photos</a> 
 
     </ul> 
 
     </li> 
 
     <li><a href="contact/index.html">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

私は多くのエラーがあると確信しているが、私はそれが中心にするために何ができますか?また、navにメインulからオーバーフローを隠しても、ドロップダウンメニューを表示させることは可能ですか?ありがとうございました。

答えて

1

変更のみ:

#NavigationTop ul { 
    list-style: none; 
    position: relative; 
    margin: 0 auto; 
    padding-right: 1px; 
    display: inline-block; 
} 

div#main-nav { 
    text-align: center; 
} 
0

div中心または任意のhtml要素を作成したいときはいつでも。コンテナ(divやulなど)が必要で、そのコンテナ内にhtml要素を配置し、マージンを持つそのコンテナに具体的にの幅を与えます。0:速記概念(0オート)で 幅を指定することで、あなたのコンテンツがビューポート全体に広がらない(ブラウワー画面)とあなたがマージンを指定するには、を意味トップ&ボトムしばらく自動車のためのマージンを開催します保持する左&右自動的にブラウザで。

次に、そのコンテナをどのように配置するにしても、フローティングを使用してデザインが完璧に見えるようにすることができます。

#メイン-NAV

#main-nav{ 
    width: 1120px; //in your design case i found it this in px. 
    margin: 0 auto; 
} 


#NavigationTop ul{ 
    list-style: none; 
    position:relative; 
    margin:0 auto; 
    padding-right: 1px; 
} 

#main-nav{ 
 
     width: 1120px; //in your design case i found it this in px. 
 
     margin: 0 auto; 
 
    } 
 
    
 
#NavigationTop ul{ 
 
    list-style: none; 
 
\t position:relative; 
 
\t margin:0 auto; 
 
\t padding-right: 1px; 
 
} 
 

 
#NavigationTop ul a{ 
 
\t color:#ffffff; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:15px; 
 
\t padding:0 15px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    line-height: 50px; 
 
    text-transform: uppercase; 
 
} 
 

 
#NavigationTop ul li{ 
 
    background-color: #343434; 
 
    width: 215px; 
 
    height: 50px; 
 
\t position:relative; 
 
\t float: left; 
 
\t margin:0 auto; 
 
\t text-align: center; 
 
\t border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
#NavigationTop ul li:hover{ 
 
    background-color: lightseagreen; 
 
} 
 
#NavigationTop ul li a:visited{ 
 
    color: #ffffff 
 
} 
 

 
#NavigationTop ul ul{ 
 
    display:none; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
    padding:0; 
 
    margin: 0; 
 
} 
 

 
#NavigationTop ul ul li{ 
 
    float:none; 
 
    width:215px; 
 
    border-bottom: 1px solid; 
 
} 
 

 
#NavigationTop ul li:hover > ul{ 
 
    display: block; 
 
}
<nav id="NavigationTop"> 
 
\t <div id="main-nav"> 
 
\t <ul> 
 
\t  <li><a href="index.html">HOME</a></li> 
 
\t  <li><a href="bio/index.html">BIOGRAPHY</a></li> 
 
\t \t <li><a href="discography/index.html" class="disco">DISCOGRAPHY</a></li> 
 
\t \t <li><a href="media/index.html">MEDIA</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Audio</a> 
 
\t \t \t \t <li><a href="#">Video</a> 
 
\t \t \t \t <li><a href="#">Photos</a> 
 
\t \t </ul></li> 
 
\t  <li><a href="contact/index.html">CONTACT</a></li> 
 
\t </ul> 
 
    </div> 
 
</nav>

0
にそれを追加し、その後破壊ではない、あなたのメニューまで、特定の幅を追加 #NavigationTop ULから

を幅を削除します

#NavigationTop ulクラスrデフォルトではulがパディングをとり、デフォルトはpadding-left:の場合は40pxと思われるため、padding-left:0をemoveします。

#NavigationTop ul{ 
 
    list-style: none; 
 
    position:relative; 
 
    margin:0 auto; 
 
    padding-right: 1px; 
 
    width: 1075px; 
 
    overflow:auto; 
 
    padding-left:0; 
 
} 
 

 
#NavigationTop ul a{ 
 
    color:#ffffff; 
 
    text-decoration:none; 
 
    font-weight:700; 
 
    font-size:15px; 
 
    padding:0 15px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    line-height: 50px; 
 
    text-transform: uppercase; 
 
} 
 

 
#NavigationTop ul li{ 
 
    background-color: #343434; 
 
    width: 215px; 
 
    height: 50px; 
 
    position:relative; 
 
    float: left; 
 
    margin:0 auto; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
#NavigationTop ul li:hover{ 
 
    background-color: lightseagreen; 
 
} 
 
#NavigationTop ul li a:visited{ 
 
    color: #ffffff 
 
} 
 

 
#NavigationTop ul ul{ 
 
    display:none; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    padding:0; 
 
    margin: 0; 
 
} 
 

 
#NavigationTop ul ul li{ 
 
    float:none; 
 
    width:215px; 
 
    border-bottom: 1px solid; 
 
} 
 

 
#NavigationTop ul li:hover > ul{ 
 
    display: block; 
 
}
<nav id="NavigationTop"> 
 
    <div id="main-nav"> 
 
    <ul> 
 
    <li><a href="index.html">HOME</a></li> 
 
    <li><a href="bio/index.html">BIOGRAPHY</a></li> 
 
    <li><a href="discography/index.html" class="disco">DISCOGRAPHY</a></li> 
 
    <li><a href="media/index.html">MEDIA</a> 
 
     <ul> 
 
     <li><a href="#">Audio</a> 
 
     <li><a href="#">Video</a> 
 
     <li><a href="#">Photos</a> 
 
     </ul> 
 
    </li> 
 
    <li><a href="contact/index.html">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

0

あなたはこの1 https://jsfiddle.net/mnd1b51y/1/

#NavigationTop ul li { position: relative;} 
#NavigationTop ul li:hover > ul { 
    left: 0; 
    max-width: 210px; 
    position: absolute; 
    top: 51px; 
} 
を試すことができます
関連する問題