Question

我了解使用当前HTML制作下拉菜单的基础知识但不了解我如何使用当前的CSS执行相同操作。我也是HTML和CSS的新手，非常感谢，非常感谢！这是我的HTML编码：

＆＃13;

/*The overflow:hidden hides the scroller that appears on page*/
body {
  overflow: hidden;
}

html {
	background: url('http://pre15.deviantart.net/5686/th/pre/i/2016/338/6/2/living_tree_by_tacosauceninja-daqj4zz.jpg') no-repeat center center fixed;
	background-size: cover;
}

h1 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

/* The code below is what makes the bar invisible*/
#navdiv{
	opacity: 0.7;
	filter: (opacity=70);
}

#navdiv ul {
	width:100%;
	height: 80px;
	background:#648DA0;
	line-height:80px;
	color: white;
	text-align: center;
}

#navdiv ul a{
	text-decoration: none;
	color: white;
}


/*The padding left and right allows you to choose the spacing between each page on your navigation bar*/
#navdiv ul li {
	list-style-type: none;
	padding-left: 50px;
	padding-right: 50px;
	display: inline-block;
	float: center;
}

#navdiv ul li:hover{
	background: #8FB0BF;
	text-align: center;
	transition:all 0.40s;
	
}

#navdiv h1{
	width: 300px;
	float:center;
	cursor: pointer;
	margin-left: 15px;
}

＆＃13;

<!DOCTYPE>
<html>
<head>
				<title>Homepage</title>
	<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>

	<body>
	
		<div id="Maindiv">
			<div id="navdiv">
					<h1> Hello World... </h1>
				<ul>
					<li><a href="relax.html" class="btn-default"> Relax </a></li>
					<li><a href="motivation.html" class="btn-default"> Motivation </a></li>
					<li><a href="homepage.html" class="btn-default">HomePage</a></li>
					<li><a href="#">Info</a></li>
					<li><a href="healing.html" class="btn-default"> Healing </a></li>
				</ul>
				
			</div>
		</div>
	
	</body>
</html>

＆＃13;

Answer 1

所以你知道在LI中嵌套UL来制作一个下拉菜单吗？

您需要在CSS中将display:none设置为子菜单，然后在用户将鼠标悬停在相应的li上时将其更改为display:block。

我添加了一个基本代码段作为向您展示尽可能简单的想法。

＆＃13;

ul { 
  list-style-type: none;
}

/* Hide the submenu */
ul.submenu {
  display: none;
}

/* Show the submenu when hovering over the li */
li.dropdown:hover > ul {
  display: block;
}

＆＃13;

<ul>
  <li class="dropdown"><a href="#">Link</a>
    <ul class="submenu">
      <li><a href="#">Sub Link</a></li>
      <li><a href="#">Sub Link</a></li>
      <li><a href="#">Sub Link</a></li>
    </ul>
  </li>
  <li><a href="#">Link</a></li>
</ul>

＆＃13;

我在HTML中会改变的一件事就是使用ID＆＃39; s。只需给出一个类名，然后你就可以更好地控制它。

如何使用我当前的CSS添加下拉菜单？

1 个答案: