HTML定位：无法正确定位

我创建了一个小提琴：

https://jsfiddle.net/14f5jro7/

问："Familien"的子菜单(将鼠标悬停在上面查看(为什么没有出现在下方，而是向右移动？

Blabla：我几个小时以来一直在尝试建立一个合适的菜单，根据我阅读的教程，父级应该是位置=相对，子位置=绝对。然后我可以使用顶部和左侧。这就是我试图做的，我不知道为什么它失败了。

.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;
}

ul 内部 .sub 菜单有一个左填充。

这将更改为左侧：

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

并通过您放置的边缘将左值更改为 -3px

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

#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;
}

<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>

在子菜单中添加左边距:)

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

这是某些浏览器中 ul 标签中默认左填充的常见问题。这就是为什么许多作者强烈建议重置默认的 css 规则。CSS 最佳实践

这里是该情况的修复程序：工作示例

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

希望这有帮助！

相关内容

最新更新

热门标签：