Question

我希望菜单子项目显示在菜单项下方。就像现在一样，他们有点正确。

CSS

ul#menu {
    float:left;
    width:100%;
    margin:0;
    padding:0;
    list-style-type:none;
    background-color:#D60024;
}

ul#menu > li {
    float:left;
    display:inline;
    position:relative;
    padding:3px;
    border:1px #8a0505 solid;
    background-color:#D60024;
    color:white;
}

ul#menu > li:hover {
    background:#8a0505;
    color:white;
}

ul#menu > li:hover ul {
    opacity:1;
    left:0;
    height:auto;
}

ul#menu li ul {
    position:absolute;
    float:left;
    width:100px;
    height:0;
    padding: 5px;
    margin:0;
    opacity:0;
}

ul#menu ul li {
    background-color:#D60024;
    border:1px #8a0505 solid;
}

ul#menu ul li:hover {
    background:#8a0505;
    border:1px #8a0505 solid;
    color:white;
}

JSFiddle

Answer 1

不是最好的解决方案，但它可以满足您的需求

编辑此

ul#menu ul li {
   background-color:#D60024;
   border:1px #8a0505 solid;
}

在此

ul#menu ul li {
   background-color:#D60024;
   border:1px #8a0505 solid;
   margin-left:-6px;
}

Answer 2

在你的css中修改： Demo

ul#menu > li:hover ul {
    opacity:1;
    left:-6px;
}

Answer 3

工作解决方案：http://jsfiddle.net/avi_sagi/sTQLh/11/

在css规则中

ul#menu li ul { 
    padding: 6px;
}

我假设您将下拉列表项对齐到主菜单项的底部。它正在创建左侧的空间

正确的CSS规则应该是。

ul#menu li ul {
  padding: 0px;
  margin:4px 0 0 -1px;
}

margin-left：提供-1px以拉下左下角，因为主菜单的1px边框正在按下下拉列表，它是主菜单列表项的子元素。你是否希望使用它。

使用填充而不是边距是一种不好的做法。两者都创造了空间，但它们的定义不同，滥用可能会产生问题。其次，出现这些问题通常使用Inspect Element或Firebug来查看为什么会创建这些空间。

希望这有帮助！

Answer 4

试试这个fiddle

CSS更改

ul#menu li ul {
    padding: 0;
    top:100%;
    margin-left:-2px;
}

Answer 5

ul#menu li ul {
    position:absolute;
    float:left;
    width:100px;
    height:0;
    padding: 5px;  // to  change padding: 5px 5px 5px 0;
    margin:0;
    opacity:0;
}

请参阅演示your Demo edited

子菜单项未正确放置

5 个答案: