我是新来的，这是我的第一个问题所以请怜悯我和我破碎的英语;）
我的html导航错误。我遵循了多个指南，现在我遇到以下问题：如果我在我的subnavi元素上添加命令position: absolute;，则可能会重叠以下内容，但子菜单项与主菜单的大小不同！如果我删除它，大小是正确的，但我没有重叠！
伙计们，我需要你的帮助，因为这个项目得到了分数，必须在星期一之前完成！
R上。感性
我的结果的敏锐度： Frame with "postion: absolute" Frame without "postion: absolute"
我的代码：
/* CSS Style für Kletterwelt - Allgemeine Inhalte v1.01 vom 17.06.2017*/
/* Allgemeine Daten & Einstellungen */
*
{
margin: 0px;
padding: 0px;
}
body
{
/* Für den Gesamten Inhalt gilt */
width: 90%;
margin: auto;
/* Für den Text des gesamten Inhaltes gilt */
font-family: arial;
}
header img
{
width: 100%;
}
/* Navi */
ul.navi
{
list-style-type:none;
}
ul#hauptmenu li
{
width: 19%; /* Aufteilung der Hauptmenüpunkte in relative Größe */
text-align: center;
position: relativ; /* Untermenüs werden relativ zu ihrem Hauptmenüpunkt zugeordnet */
float: left;
margin-right: 4px;
}
ul#hauptmenu a
{
text-decoration: none; /* Entfernt Unterstriche der Links */
display: block; /* gesamtes Listenelement wird zum anklickbaren Button, nicht nur das Wort */
height: 40px;
line-height: 40px; /* Wenn Wert mit "height" identisch ist, ist Text vertikal zentriert */
background-color: #333333;
color: white;
font-weight: bold;
border: 2px solid #333333;
border-radius: 5px;
}
ul#untermenu li
{
width: 100%; /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}
ul#hauptmenu li:hover > a
{
background-color: #777777; /* markiert Buttons übergeordneter Menüs UND den Button, über den man hovert, grau */
}
ul#hauptmenu li:hover a:hover
{
background-color: #FF0000; /* markiert Button, über den man hovert, rot (überschreibt Definition)*/
}
ul#hauptmenu ul#untermenu
{
display: none; /* Untermenüpunkte standardmäßig ausblenden*/
/* position: absolute; /* HERE!!! WHY?! */
}
ul#hauptmenu li:hover #untermenu
{
display: block; /* beim Hovern über übergeordneten Menü, soll das untergeordnete eingeblendet werden */
z-index: 500; /* Untermenüpunkte werden über dem Content angezeigt (Ebenen-technisch) */
}<!DOCTYPE HTML>
<html lang="de">
<head>
<title>testnavi</title>
<link rel="icon" href="./bilder/icon.ico">
<meta charset="utf-8">
<meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">
<link rel="stylesheet" type="text/css" href="./css/CWAllgemeinStyle.css">
<!--<link rel="stylesheet" type="text/css" href="./css/testc.css"> -->
</head>
<body>
<header>
<img src="./bilder/headerbild.jpg">
<!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
<ul class="navi" id="hauptmenu">
<li><a href="#">HOME</a>
<ul class="navi" id="untermenu">
<li><a href="#">NEWS</a></li>
</ul>
</li>
<li><a href="#">VIDEOS</a></li>
<li><a href="#">SCHWIERIGKEITSGRADE</a></li>
<li><a href="#">SICHERUNGSGERÄTE</a>
<ul class="navi" id="untermenu">
<li><a href="#geräteart1">DINGER</a></li>
<li><a href="#geräteart2">TEILE </a></li>
</ul>
</li>
<li><a href="#">ALLGEMEINES</a></li>
</ul>
<img src="./bilder/headerbild.jpg">
</header>
</body>
</html>
注意： 我的index.html将在projekt文件夹中。在这个文件夹中将是一个＆＃34; css＆＃34; -folder，其中我的＆＃34; CWAllgemeinStyle.css＆＃34;谎言。
答案 0 :(得分：0)
你在ul#hauptmenu li拼错了你的风格。它应该是position:relative而不是position:relativ。这是必需的，否则您的绝对ul#hauptmenu ul#untermenu元素位置将不会相对于ul#hauptmenu li。
我已将position:absolute添加回ul#hauptmenu ul#untermenu以将其从网站流程中删除，因此不会将您的内容推迟。我还添加了width:100%，因此它会扩展为父li的宽度。
/* CSS Style für Kletterwelt - Allgemeine Inhalte v1.01 vom 17.06.2017*/
/* Allgemeine Daten & Einstellungen */
*
{
margin: 0px;
padding: 0px;
}
body
{
/* Für den Gesamten Inhalt gilt */
width: 90%;
margin: auto;
/* Für den Text des gesamten Inhaltes gilt */
font-family: arial;
}
header img
{
width: 100%;
}
/* Navi */
ul.navi
{
list-style-type:none;
}
ul#hauptmenu li
{
width: 19%; /* Aufteilung der Hauptmenüpunkte in relative Größe */
text-align: center;
/* This style was spent wrong. You spelt it relativ */
position: relative; /* Untermenüs werden relativ zu ihrem Hauptmenüpunkt zugeordnet */
float: left;
margin-right: 4px;
}
ul#hauptmenu a
{
text-decoration: none; /* Entfernt Unterstriche der Links */
display: block; /* gesamtes Listenelement wird zum anklickbaren Button, nicht nur das Wort */
height: 40px;
line-height: 40px; /* Wenn Wert mit "height" identisch ist, ist Text vertikal zentriert */
background-color: #333333;
color: white;
font-weight: bold;
border: 2px solid #333333;
border-radius: 5px;
}
ul#untermenu li
{
width: 100%; /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}
ul#hauptmenu li:hover > a
{
background-color: #777777; /* markiert Buttons übergeordneter Menüs UND den Button, über den man hovert, grau */
}
ul#hauptmenu li:hover a:hover
{
background-color: #FF0000; /* markiert Button, über den man hovert, rot (überschreibt Definition)*/
}
ul#hauptmenu ul#untermenu
{
display: none; /* Untermenüpunkte standardmäßig ausblenden*/
/* Position absolute required to take it out of the flow of the website so it stops below content being push down */
position: absolute;
/* Applied width 100% to it expands to the width of the parent li. */
width:100%;
}
ul#hauptmenu li:hover #untermenu
{
display: block; /* beim Hovern über übergeordneten Menü, soll das untergeordnete eingeblendet werden */
z-index: 500; /* Untermenüpunkte werden über dem Content angezeigt (Ebenen-technisch) */
}<!DOCTYPE HTML>
<html lang="de">
<head>
<title>testnavi</title>
<link rel="icon" href="./bilder/icon.ico">
<meta charset="utf-8">
<meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">
<link rel="stylesheet" type="text/css" href="./css/CWAllgemeinStyle.css">
<!--<link rel="stylesheet" type="text/css" href="./css/testc.css"> -->
</head>
<body>
<header>
<img src="./bilder/headerbild.jpg">
<!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
<ul class="navi" id="hauptmenu">
<li><a href="#">HOME</a>
<ul class="navi" id="untermenu">
<li><a href="#">NEWS</a></li>
</ul>
</li>
<li><a href="#">VIDEOS</a></li>
<li><a href="#">SCHWIERIGKEITSGRADE</a></li>
<li><a href="#">SICHERUNGSGERÄTE</a>
<ul class="navi" id="untermenu">
<li><a href="#geräteart1">DINGER</a></li>
<li><a href="#geräteart2">TEILE </a></li>
</ul>
</li>
<li><a href="#">ALLGEMEINES</a></li>
</ul>
<img src="./bilder/headerbild.jpg">
</header>
</body>
</html>