个人中心
gpt4 book ai didi

CSS 菜单栏没有子菜单

转载 作者：行者123 更新时间：2023-11-28 06:03:16 26 4
gpt4 key购买 nike

我是 CSS 初学者，我想创建一个带有子项的菜单。我在网上找到了一个模型，我想定制它，但它不起作用。在文本中，您可以找到仅包含菜单的 XHTML 和 CSS 文件。菜单显示正确，但我希望像“团队”这样的子菜单与相应的元素一起显示。

我在互联网上搜索并自定义了“#menu ul li:hover > ul {”几次，但我看不到错误。我认为错误一定是在那个函数中，因为我想在将鼠标移到菜单上时出现菜单。

你能告诉我错误在哪里吗？ 

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);




p, ul, li, div, nav 
{ 

padding:0; margin:0; 
} 

body { 
font-family:Calibri; 
} 

#menu 
{ 
position: absolute; overflow: auto;  z-index:2; 
} 

.parent-menu { 
background-color: white; 
color:black;
min-width:200px;
 float:left;
 } 
 
#menu ul 
 { 
 list-style-type:none; 
 } 
 
#menu ul li a {
	
	 padding:10px 15px; 
	 display:block; 
	 color:black; 
	 text-decoration:none; }

#menu ul li a:hover {
	background-color:blue; 
	}


#menu ul li:hover > ul { 
left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; 
} 


#menu ul li > ul {
	position: absolute; background-color: #333; top: 0; left: -200px; min-width: 200px; z-index: -1; height: 100%; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; } 
	
	#menu ul li > ul li a:hover {
		background-color:#2e2e2e;
		}

		
		

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width"/>
	<title>CSS Site</title>


    <link href="style.css" rel="stylesheet" type="text/css" />
</head>


<body>
	<header class="header">
		<h1>CSS Site</h1>
	</header>
	<nav id="menu">
		<ul class="parent-menu">
			<li><a  href="#">Home</a></li>
			<li>
				<a  href="#">About</a>
				<ul>
					<li> Team</li>
					<li> Philosophie</li>
					<li> Partner</li>
				</ul>
			</li>
			<li><a  href="#">References</a></li>
			<li>
				<a href="#">Contact</a>
				<ul>
					<li>Way</li>
					<li>Rooms</li>
				</ul>
			</li>
		</ul>
	</nav>

</body>
</html>

最佳答案

如果你想让它保持这样，你的 ul 是 li 的 child ，你需要做下一个操作。

http://plnkr.co/edit/JaVAaMunLFnT3TPGNQnY?p=preview

/* Styles go here */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);




p, ul, li, div, nav 
{ 

padding:0; margin:0; 
} 

body { 
font-family:Calibri; 
} 

#menu 
{ 
position: absolute; overflow: auto;  z-index:2; 
} 

.parent-menu { 
background-color: white; 
color:black;
min-width:400px;
 float:left;
 } 
 
#menu ul 
 { 
 list-style-type:none;
 } 
#menu li {
  width:200px;
}
 
#menu ul li a {
	
	 padding:10px 15px; 
	 display:block; 
	 color:black; 
	 text-decoration:none; }

#menu ul li a:hover {
	background-color:blue; 
	}


#menu ul li:hover > ul { 
top: 0px; 
-webkit-transition: top 200ms ease-in;
-moz-transition: top 200ms ease-in; 
-ms-transition: top 200ms ease-in; 
transition: top 200ms ease-in; 
} 


#menu ul li > ul {
	position: absolute; 
	background-color: #333;
	top: -200px; 
	left: 200px;
	min-width: 200px; 
	z-index: 0; 
	height: 100%; 
	-webkit-transition: left 200ms ease-in;
	-moz-transition: left 200ms ease-in;
	-ms-transition: left 200ms ease-in;
	transition: left 200ms ease-in; 
  
} 
	
	#menu ul li > ul li a:hover {
		background-color:#2e2e2e;
		}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <header class="header">
		<h1>CSS Site</h1>
	</header>
	<nav id="menu">
		<ul class="parent-menu">
			<li><a  href="#">Home</a></li>
			<li>
				<a  href="#">About</a>
				<ul>
					<li> Team</li>
					<li> Philosophie</li>
					<li> Partner</li>
				</ul>
			</li>
			<li><a  href="#">References</a></li>
			<li>
				<a href="#">Contact</a>
				<ul>
					<li>Way</li>
					<li>Rooms</li>
				</ul>
			</li>
		</ul>
	</nav>

  </body>

</html>

我将动画从左移到上，因为这会导致 z-indexes 出现问题，如果需要保留，请告诉我，我会尽力帮助您

关于CSS 菜单栏没有子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36630180/

26 4 0
文章推荐： Swift:无法识别泛型的类型协议(protocol)
文章推荐： c++ - c++中的加法ASCII
文章推荐： javascript - 3d.js - 更新力导向图上的节点
文章推荐： c++ - OpenCV 改变 RGB 强度