我的下拉菜单有问题答案

【问题标题】：Having issues on my drop-down menu我的下拉菜单有问题
【发布时间】：2016-03-02 21:33:21
【问题描述】：

所以我在创建下拉子菜单时遇到了麻烦。我已经开始给主 ul 一个类和第二个 ul 的 id，但之后我不知道应该在哪里应用 CSS。我将 ul#sub1 和 li a:hover display 都设置为阻止，这样你就可以准确地看到我想说的演示：

ul {
	list-style-type:none;
	margin:0;
	padding:0;
	background-color:#404040;
	overflow:hidden;
}

li {
	float:left;
}

li a {
	display:block;
	padding:15px;
	color:#8c8c8c;
	float:left;
	text-decoration:none;
	padding:30px;
	display:absolute;
	font-size:15px;
	letter-spacing:2px;
	
}

ul#sub1 {
	display:block;
	position:absolute;
	top:78px;
	left:410px;
}

li a:hover {
	background-color:#ff8533;
	color:white;
	transition:0.4s;
	display:block;
}

li a.active {
	background-color:#ff8533;
	color:white;
}

<ul class='navmenu'>
			<li><a href='http://www.google.ro'>HOME</a></li>
			<li><a class='active' href='http://www.google.ro'>ABOUT US</a></li>
			<li><a href='http://www.google.ro'>SERVICES</a></li>
			<li><a href='http://www.google.ro'>GALLERY</a></li>
				<ul id='sub1'>
					<li>
						<a href='http://www.google.ro'>GALLERY 2</a>
					</li>
					<li>
						<a href='http://www.google.ro'>GALLERY 3</a>
					</li>
					<li>
						<a href='http://www.google.ro'>GALLERY 4</a>
					</li>
				</ul>
			<li><a href='http://www.google.ro'>NEWS</a></li>
			<li><a href='http://www.google.ro'>CONTACTS</a></li>
		</ul>

【问题讨论】：

我不清楚，你是想隐藏画廊的孩子吗？

标签： html css submenu dropdown

【解决方案1】：

ul {
  	list-style-type:none;
	margin:0;
	padding:0;
	background-color:#404040;
  }

ul.navmenu {

  position:relative;
  display:inline-block;
  width:100%;
}

li {
	float:left;
  position:relative;
}

li a {
	display:block;
	padding:15px;
	color:#8c8c8c;
	float:left;
	text-decoration:none;
	padding:30px;
	display:absolute;
	font-size:15px;
	letter-spacing:2px;
	
}

ul.navmenu > li:hover a + ul {
display:block;
  }

ul.navmenu ul {
	display:none;
	position:absolute;
	top:100%;	
}

ul#sub1 li {
  display:block;
  float:none;
  }

li a:hover {
	background-color:#ff8533;
	color:white;
	transition:0.4s;
	display:block;
}

li a.active {
	background-color:#ff8533;
	color:white;
}

<ul class='navmenu'>
			<li><a href='http://www.google.ro'>HOME</a></li>
			<li><a class='active' href='http://www.google.ro'>ABOUT US</a></li>
			<li><a href='http://www.google.ro'>SERVICES</a></li>
			<li><a href='http://www.google.ro'>GALLERY</a>
				<ul id='sub1'>
					<li>
						<a href='http://www.google.ro'>GALLERY 2</a>
					</li>
					<li>
						<a href='http://www.google.ro'>GALLERY 3</a>
					</li>
					<li>
						<a href='http://www.google.ro'>GALLERY 4</a>
					</li>
				</ul>
             </li>
			<li><a href='http://www.google.ro'>NEWS</a></li>
			<li><a href='http://www.google.ro'>CONTACTS</a></li>
		</ul>

【讨论】：