1

独自のマルチドロップダウンメニューを作成しようとしていますが、この問題が発生し、解決方法を理想化する必要があります。私が得る最良の方法は、margin-left:-100px を使用することですが、ドロップダウンがレベル 2 を超えると、位置合わせがなくなります。

これは私が開発しようとしているもの ここに画像の説明を入力 であり、これまでのところ私の最高のソリューションです...しかし、私が望むものではありません ここに画像の説明を入力

これは私のhtmlコードです

<div id="menuBox">
    <li class="mainMenu">home</li>
    <li class="mainMenu">about</li>
    <li class="mainMenu">product
        <ul class="w200">
            <li>money maker</li>
            <li>personal coarch
                <ul class="w200">
                    <li>1 to 1</li>
                    <li>1 to 5</li>
                    <li>1 to 10</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="mainMenu">consult</li>
    <li class="mainMenu">contact</li>
</div>

これは私のCSS設定です

li.mainMenu{
  list-style:none; 
  display:inline-block;
  padding:25px 35px;
  border-top:1px solid #CCCDDD;
  margin:0px;
  font-size:1.3em;
  background:#CCCCCC;
}
li{
  background:#CCCCCC;
  cursor:pointer;
}
ul{
  float:left;
  position:absolute;
  z-index:999;
  list-style:none;
}
ul>li{
  padding:5px 20px;
}

では、どのコードをどのように変更すればよいですか?

4

2 に答える 2

1

アイテムは要素内にしか存在できないため、最初にdivtoを変更する必要があります。ulliul/ol

このCSSで試してください

#menuBox, #menuBox ul{ /*reset ul styling for menu/submenu*/
    padding:0;
    margin:0;
}
#menuBox{
    white-space:nowrap;
    list-style:none;
    font-size:1.3em;
}
#menuBox > li{ /*first level li elements*/
    display:inline-block;
    padding:25px 35px;
    border-top:1px solid #CCCDDD;
    margin:0px;
}
#menuBox li{ /*all li elements*/
    position:relative;
    background:#CCCCCC;
    cursor:pointer;
}
#menuBox li:hover{ /*hovered li elements*/
    background:black;
    color:white;
}
#menuBox li li{ /*sub li elements - all levels after 1st*/
    color:black; /*hide all submenus*/
    padding:5px 20px;
}
#menuBox li:hover > ul { /*submenu ul elements*/
    display:block; /*show submenu when parent li is hovered*/
}
#menuBox ul{ /*all submenu ul elements*/
  z-index:999;
  list-style:none;
  position:absolute;
  top:80%;
  left:50%;
  border:1px solid black;
  display:none;
}

http://jsfiddle.net/gaby/g6yX2/のデモ

于 2012-11-17T16:00:42.463 に答える
0

li.mainMenu の左パディングが 35 に設定されているため、削除します。そのパディングを維持したい場合：

HTML:

<li class="mainMenu"><label>product</label>
    <ul class="w200">
        <li><label>money maker</label></li>
        <li><label>personal coarch</label>
            <ul class="w200">
                <li>1 to 1</li>
                <li>1 to 5</li>
                <li>1 to 10</li>
            </ul>
        </li>
    </ul>
</li>

CSS:

li.mainMenu{
    list-style:none; 
    display:inline-block;
    padding:25px 0px;
    border-top:1px solid #CCCDDD;
    margin:0px;
    font-size:1.3em;
    background:#CCCCCC;
}
li.mainMenu label {
    padding: 0px 35px;
}

例: http://jsfiddle.net/RaPK9/

于 2012-11-17T15:47:06.193 に答える