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

首先，您需要将 更改为div，ul因为这些li项目只允许在ul/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 回答