Question

我是CSS的初学者，我想创建一个带有SubItems的菜单。我在互联网上找到了一个模型，我想自定义它，但它不起作用。在文本中，您只需使用菜单即可找到XHTML和CSS文件。菜单显示正确，但我希望像“团队”这样的子菜单显示相应的项目。

我在互联网上搜索并定制了“#menu ul li：hover＆gt; 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>

Answer 1

如果你想让它像你一样需要做下一次操作，那么你的ul就是你的孩子。

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-index出现问题，如果有必要留下，请告诉我，我会尽力帮助你

Answer 2

你错过了很多东西。

您的HTML

<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>

我创建的CSS代码

ul {
  list-style: none;
}

li {
  background-color: #fff;
  cursor: pointer;
  padding: 10px 15px;
  max-width: 300px;
}

a {
  color: black;
  text-decoration: none;
}

.parent-menu li:hover a,
.parent-menu li ul li:hover {
  color: blue;
}

.parent-menu li ul {
  display: none;
}

.parent-menu li:hover ul {
  display: block;
  position: absolute;
  left: 290px;
  top: 0px;
}

.parent-menu li {
  position: relative;
}

在其中我创建了一个基本代码，您需要这样做。

尝试自己理解代码，如果你卡在某处，请在此处发表评论。

CSS菜单栏没有子菜单

2 个答案: