CSS 子菜单错误：ul#[class] -> position: absolute;没有重叠或错误的菜单宽度
CSS Submenu Mistake: ul#[class] -> position: absolute; No overlap or wrong menu width
我是新来的，这是我的第一个问题所以请怜悯我和我蹩脚的英语 ;)
我的 html 导航有误。我遵循了多个指南，现在我遇到了以下问题：如果我在我的子导航元素上添加命令 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 将在项目文件夹中。在此文件夹中将有一个 "css" 文件夹，我的 "CWAllgemeinStyle.css" 就在其中。
您在 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>
我是新来的，这是我的第一个问题所以请怜悯我和我蹩脚的英语 ;)
我的 html 导航有误。我遵循了多个指南，现在我遇到了以下问题：如果我在我的子导航元素上添加命令 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 将在项目文件夹中。在此文件夹中将有一个 "css" 文件夹，我的 "CWAllgemeinStyle.css" 就在其中。
您在 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>