文章/答案/技术大牛

发布

问CSS Menubar no SubMenus
EN

Stack Overflow用户

提问于 2016-04-15 01:36:23

回答 2查看 43关注 0票数 0

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

我已经在互联网上搜索了几次，并自定义了“#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>

css

xhtml

回答 2

Stack Overflow用户

发布于 2016-04-15 02:06:11

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

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索引出现问题，如果需要保留，请让我知道，我会尽力帮助您解决问题

票数 0

Stack Overflow用户

发布于 2016-04-15 02:12:53

你错过了太多东西。

你的超文本标记语言

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

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

试着自己理解代码，如果你遇到了什么问题，就在这里发表你的评论。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36630180

复制

相似问题

问CSS Menubar no SubMenus
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Menubar no SubMenusEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Menubar no SubMenus
EN