0

いくつかのチュートリアルに従った後、CSS のみの垂直ドロップダウン メニューを構築することができました。ただし、幅と絶対オフセットはハードコーディングされており、内容に応じて自動的に調整することはできません。メニュー項目の実際の長さがわからない CMS に統合したいので、これらのハードコーディングは避けたいと考えています。

メニューが機能していることを示す JSFiddle をここに作成しました: http://jsfiddle.net/nhfHw/2/

トップレベルのアイテムは現在、幅100pxにハードコードされています（そのレベルで最も長いアイテムに応じて調整したいと思います）。それを削除しようとすると、次のサブレベルが画面全体に拡大されました。

#navigation 
{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #707070;
  line-height: 20px;
  width: 100px;  /* I wish to remove this */
  margin-top: 30px;
}

サブレベルの x オフセットもハードコーディングされています。親の幅に合わせて調整してほしい。それらの幅も 200px にハードコーディングされています。

li:hover .sub-level 
{
  background: #D0D0D0;
  display: block;
  position: absolute;
  left: 100px; /* I wish to remove this */
  top: 0px;
}

li:hover .sub-level .sub-level 
{
  left: 210px; /* I wish to remove this */
  top: 0px;
}

ul.sub-level li 
{
  border: none;
  float:left;
  width: 200px; /* I wish to remove this */
}

できればJavascriptは避けたいです。

4

2 に答える 2

1

ここで、上記の回答が行ったことですが、バグはありません...

http://jsfiddle.net/techsin/UBgZf/2/ 更新

*{padding:0;margin:0;}
.main{position:relative;}
ul ul{
    display:none;
    position:absolute;
    left:100%;
    margin-top:-30px;
}
.main>li>ul{
    background-color:#BDBDBD;
}
ul {
    white-space: nowrap;
    color:white;
    background-color:gray;
    float:left;
}
li{
    height:20px;
    list-style-type:none;
    padding:10px;
    clear:both;
}
li:hover>ul{
    background-color:black;
    display:block;
}

トリックは次のとおりです。

  • ホワイトスペース 折り返しなし
  • 浮く
  • 絶対配置であるため、常に絶対配置または相対配置された最初の要素を参照します。
于 2013-08-26T21:34:01.790 に答える