CSS水平ドロップダウン配置

水平ドロップダウンメニューを使用して水平ナビゲーションメニューを実装しようとしています。私はナビゲーションコンテナの中央に座るように水平ドロップダウンテキストをどのように配置するのかを理解しようとしているので、ユーザーはマウスを左に動かしてリンクに到達する必要はありません。CSS水平ドロップダウン配置

<style type="text/css"> 
#nav-container { 
    padding: 4px; 
    width: 900px; 
    height: 60px; 
    background: #CCC; 
} 
#navbar { 
    margin:0; 
    padding:0; 
} 
#navbar li { 
    padding: 6px; 
    display: inline; 
    list-style: none; 
} 
#navbar li ul { 
    display: none; 
    position: absolute; 
    margin:0; 
    padding:0; 
    width: 900px; 
} 
#navbar li:hover ul { 
    display: block; 
} 

</style> 
</head> 

<body> 
<div id="nav-container"> 
<ul id="navbar"> 
    <li><a href="#">Link</a> 
     <ul> 

      <li><a href="#">Hello</a></li> 
      <li><a href="#">World</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Peace</a></li> 

      <li><a href="#">Love</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Smiles</a></li> 
      <li><a href="#">Cries</a></li> 

     </ul> 
    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Homer</a></li> 
      <li><a href="#">Peter</a></li> 
     </ul> 

    </li> 
    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Giggity</a></li> 
      <li><a href="#">Fapping</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Link</a> 
     <ul> 
      <li><a href="#">Napster</a></li> 
      <li><a href="#">Myspace</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

これは単なる一例を示したラフなコードで、ここでのコードのlive exampleです。

おかげ

出典

2011-01-24 mrdthomas

相対絶対位置の組み合わせは、トリックを行うべきです。私はこれらの2つのルールを追加しようと、それが動作するように見えた：トリックを行うようだ

#navbar li { 
    position: relative; 
} 

#navbar li ul { 
    position: absolute; 
    left: 0; 
    top: 24px; /* must me same as the height of parent li +/- a couple of pixels */ 
}

。

出典

2011-01-24 06:36:09

トリックをやった、ありがとう!! – mrdthomas

CSS水平ドロップダウン配置

答えて

関連する問題