Question

我创建了一个小提琴：

问题：为什么＆＃34; Familien＆＃34;的子菜单？（将鼠标悬停在它上方看到它）不会出现在下方但向右移动？

Blabla：我已经尝试了几个小时来构建一个合适的菜单，根据教程我已经读过父母应该是position = relative而child position = absolute。然后我可以使用顶部和左侧。这就是我尝试做的事情，我不知道为什么会失败。

HTML：

<body>
<div id="header">
</div>

<div id="menu">
    <ul>
        <li>
            <a href="#">Familien</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">Familie editieren</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Patienten</a></li>
        <li><a href="#">Materialien</a></li>
        <li><a href="#">Proben</a></li>
    </ul>    
</div>
<div id="main">
<h1>
Welcome to biobank v1.0
</h1>
</div>
<div id="footer">footer</div>
</body>

CSS：

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


#menu li {
    display: inline-block;
    padding:10px 10px;
    margin: 5px;
    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;
    position: relative;
}




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

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

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


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

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

}


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

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

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

/* 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;
}

Answer 1

ul inner .sub-menu有一个左边的填充。

这将改为左侧：

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

并将左边的值更改为-3px的边缘

在这里，您更新了代码。此致

＆＃13;

#menu ul {
list-style-type: none
}


#menu li {
    display: inline-block;
    padding:10px 10px;
    margin: 5px;
    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;
    position: relative;
}




.sub-menu {
padding-top: 5px;
left:-3px;
top: 100%;
z-index: -1;
position:absolute;
}

.sub-menu ul {
  padding: 0;
  margin: 0;
}

#menu .sub-menu ul li {
  margin: 0;
}

#menu > ul > li:hover .sub-menu {
z-index: 1;
}

#header {
float: left;
width: 100%;
background: url("images/dna.jpg");
}


#menu {
float: left;
width: 100%;
background: #E6E2E1;
border-top: 2px solid black;
border-bottom: 2px solid black;
}

#main {
float: left;
width: 100%;
min-height: 100%;
background:
linear-gradient(to right, blue, white 20%),
linear-gradient(to top, blue, white 20%)
;

}


#footer {
float: left;
width: 100%;
background-color: white;
}

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}

＆＃13;

<body>
<div id="header">
</div>

<div id="menu">
    <ul>
        <li>
            <a href="#">Familien</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">Familie editieren</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Patienten</a></li>
        <li><a href="#">Materialien</a></li>
        <li><a href="#">Proben</a></li>
    </ul>    
</div>
<div id="main">
<h1>
Welcome to biobank v1.0
</h1>
</div>
<div id="footer">footer</div>
</body>

＆＃13;

Answer 2

在子菜单中添加一个边距:)

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

Answer 3

这是某些浏览器中ul标记默认填充左侧的常见问题。这就是为什么许多作者强烈建议重置默认的CSS规则。 CSS Best Practices

此处针对该案例的修正：Working example

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

希望这有帮助！

HTML定位：无法正确使用

3 个答案: