HTML定位：can'；我没弄对

我制作了一把小提琴：

问题：为什么“Familien”（将鼠标悬停在上面查看）的子菜单不显示在下方，而是向右移动

布拉布拉：从几个小时以来，我一直在尝试建立一个合适的菜单，根据我读过的教程，父菜单应该是position=relative，子菜单应该是absolute。然后我可以用左上角。这就是我试图做的，我不知道为什么失败了

HTML:

编辑：受这些答案和进一步研究的启发，我找到了自己的解决方案。在这里，希望它能帮助其他人：

/* body */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}



/* header */
#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}


/* menu */

#menu {
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}


#menu * {
display: inline-block
}


#menu ul {
list-style-type: none;
}


#menu li {
    padding:10px 10px;
    border-radius: 10px;
    border-top:3px solid #777777;
    border-right:3px solid #333333;
    border-bottom:3px solid #444444;
    border-left:3px solid #777777;
    background: #eee;
}

#menu > ul > li {
position: relative;
}



.sub-menu {
padding:0;
left:0%; /* ignores border of parent, manual adjustment after placement needed!!*/
margin-left: -3px; /* gotta be behind left:0 !!!!*/
top: 100%;
margin-top: 3px;
z-index: -1;
position:absolute;
}

#menu > ul > li:hover .sub-menu {
z-index: 1;
}




/* main */
#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;

}


/* footer */
#footer {
float: left;
width: 100%;
background-color: white;
}

---

在子菜单中添加左边距：）

---

这是一些浏览器中ul标记默认情况下留下的填充的常见问题。这就是为什么许多作者强烈建议重置默认css规则的原因

下面是该情况的修复方法：

---

希望这有帮助

ul inner.sub菜单的左边有一个空格

这将变为左侧：

.sub-menu ul {
  padding: 0;
  margin:0;
}
#menu .sub-menu ul li {
  margin: 0;
}

并根据放置的边将左值更改为-3px

在这里，您更新了代码。问候

#菜单ul{
列表样式类型：无
}
#菜单里{
显示：内联块；
填充：10px 10px；
保证金：5px；
边界半径：10px；
边框顶部：3px实心#777777；
右边框：3px实心#333333；
边框底部：3px实心#4444；
左边框：3px实心#777777；
背景：#eee；
位置：相对位置；
}
.子菜单{
垫面：5px；
左：-3px；
最高：100%；
z指数：-1；
位置：绝对位置；
}
.子菜单ul{
填充：0；
保证金：0；
}
#菜单。子菜单{
保证金：0；
}
#菜单>ul>li：悬停。子菜单{
z指数：1；
}
#标题{
浮动：左；
宽度：100%；
背景：url（“images/dna.jpg”）；
}
#菜单{
浮动：左；
宽度：100%；
背景：#E6E2E1；
边框顶部：2件纯黑；
底部边框：2件纯黑；
}
#主要{
浮动：左；
宽度：100%；
最小高度：100%；
背景：
线性梯度（向右、蓝色、白色20%），
线性梯度（至顶部、蓝色、白色20%）
;
}
#页脚{
浮动：左；
宽度：100%；
背景色：白色；
}
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
背景颜色：灰色；
}

欢迎来到生物银行1.0版
页脚

我的问题有两个：ul的默认填充和“位置：绝对”忽略父对象的边界，即它使用边界前的第一个像素作为其定位点。您的回答没有解释后一个问题，但您在解决方案中解决了这两个问题，谢谢！

/* body */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}



/* header */
#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}


/* menu */

#menu {
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}


#menu * {
display: inline-block
}


#menu ul {
list-style-type: none;
}


#menu li {
    padding:10px 10px;
    border-radius: 10px;
    border-top:3px solid #777777;
    border-right:3px solid #333333;
    border-bottom:3px solid #444444;
    border-left:3px solid #777777;
    background: #eee;
}

#menu > ul > li {
position: relative;
}



.sub-menu {
padding:0;
left:0%; /* ignores border of parent, manual adjustment after placement needed!!*/
margin-left: -3px; /* gotta be behind left:0 !!!!*/
top: 100%;
margin-top: 3px;
z-index: -1;
position:absolute;
}

#menu > ul > li:hover .sub-menu {
z-index: 1;
}




/* main */
#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;

}


/* footer */
#footer {
float: left;
width: 100%;
background-color: white;
}

.sub-menu {
    margin-left:-55px;
    top: 100%;
    z-index: -1;
    position:absolute;
    }

.sub-menu > ul {
  padding-left: 0;
}

.sub-menu ul {
  padding: 0;
  margin:0;
}
#menu .sub-menu ul li {
  margin: 0;
}