2
我創建了一個小提琴：HTML定位：不能得到它的權利
https://jsfiddle.net/14f5jro7/
問題：爲什麼「Familien」的子菜單（在它懸停看到它）沒有出現在下面，但向右移動？
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;
}
我的問題是雙重的：UL和「位置：絕對」的默認填充忽略了父母的邊界，即它使用第一個像素，供其錨點的邊界。你的回答並沒有解釋後面的問題，但你解決了你的解決方案中的兩個問題，謝謝！ – user3182532