html - CSS 子菜单错误 : ul#[class] -> position: absolute; No overlap or wrong menu width-6ren

html - CSS 子菜单错误 : ul#[class] -> position: absolute; No overlap or wrong menu width

转载作者：行者123 更新时间：2023-11-28 03:33:20

25

4

我是新来的，这是我的第一个问题所以请怜悯我和我蹩脚的英语 ;)

我的 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 - CSS 子菜单错误 : ul#[class] -> position: absolute; No overlap or wrong menu width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44604127/

25

4

0

文章推荐： php - 使用 php 将生成的输出 html/css 转换为 pdf - 2017 年

文章推荐： C++ 不明确的运算符重载错误

文章推荐： c++ - 从列表中删除特定对象 (c++)

文章推荐： jquery - 我不想受 css 影响的图像正在受其影响

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

html - CSS 子菜单错误 : ul#[class] -> position: absolute; No overlap or wrong menu width