0

センターのネストされたナビゲーションメニューを作成していて、純粋なCSSを使用しようとしています。ここで動作するデモを参照してください：http：//jsfiddle.net/jenstechs/MKtTN/2/

ここに画像の説明を入力してください

HTML：

<nav>
  <ul id="primary">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Threee</a>
        <ul class="secondary">
            <li><a href="#">Services One</a></li>
            <li><a href="#">Services Two</a></li>
        </ul>
    </li>
    <li><a href="#">Link Four</a></li>
    <li><a href="#">Link Fiiiiive</a></li>
  </ul>
</nav>

CSS：

nav {
  margin:15px auto 10px auto;
  width:100%;
}

nav ul#primary {
  width: 100%;
  padding: 10px 0;
  margin: 0;
  background-color: #FFF;
  text-align: center;
}

nav ul#primary>li {
  display: inline;
  padding:5px 0;
  margin-left:0;
}

nav ul#primary>li>a {
  padding: 0px 30px;
  margin-right:-6px;
  color: #000;
  text-decoration: none;
  border-right:2px solid #999;
}

nav ul#primary>li>a:hover,
nav ul#primary>li.active>a {
  background-color: #900;
  color:#FFF;
  padding-top:10px;
  padding-bottom:25px;
}

nav ul#primary>li:first-child a {
    border-left:2px solid #999;
}

ul.secondary { 
    padding-top:0;
    position:absolute;
    display:none;
}
ul.secondary li {
}

nav ul#primary li:hover ul.secondary {
    display:block;
}
nav ul#primary li:hover ul.secondary li {
}

ul.secondary li a {
    display:block;
    width:7em;
    color:#FFF;
    background-color:#900;
    font-size:0.8em;
    text-decoration:none;
    text-align:left;
    line-height:1.4em;
    border-bottom:1px solid #FFF;
}

ul.secondary li:last-child a {
    border-bottom:0;
}

ul.secondary li a:hover {
    color:#DDD;
}
​

また、最小限のリセットがあります。リストにあるスタイルは、いくつかのデフォルトのマージンだけです。

これは中央に配置されたナビゲーションバーであるため、使用しているCSSはフロートではなくインラインです。そのため、CSSに何を入れて、サブメニューを実際にその親要素の下に配置するかがわかりません。私が見たほとんどの例にはposition：absoluteがありますが、それは左側にあるようです。さまざまな隠し方と見せ方（display：、left :)を試しましたが、その魔法の組み合わせが見つからないようです。

ここでは、実際には1つのサブリストしかありませんが、すべてのサブリストがある場合はどうなりますか？

ヒントや例へのリンクをありがとう...

4

1 に答える 1

0

要素をposition: absolute親に対して相対的な位置にするには、親を作成しposition: relativeます。

あなたの場合：

nav ul#primary>li {
  display: inline;
  padding:5px 0;
  margin-left:0;

  position: relative;
}

デモ： http： //jsfiddle.net/MKtTN/3/

于 2012-10-26T05:29:23.227 に答える