在悬停时制作复选框菜单下拉菜单

我已经有大约5年没有做过任何HTML或CSS，我正试图回到它来帮助当地企业。我已经创建了一个带有 DIV 类和 CSS 样式的菜单，但我不知道如何让我的菜单在悬停而不是单击时展开。

我已经尝试添加诸如 .nav：hover.item{display： block;}
无济于事。

<html>
	
	<style type="text/css">
		/*Global*/
		html,body {
			width: 100%;
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			position:top
		}
	
		
	.multi-level, .item ul, .nav
		
		input[type="checkbox"]{
		display: none;
					}
		#menu:checked ~ .multi-level, .item input:checked ~ ul {
			
			display:block;
		}
		label:hover {
cursor: pointer;
}
label {
width: 100%;
display: block;
z-index: 3;
position: relative;
}
.nav {
width: 100%;
background-color: darkblue;
	color:white;
overflow-x: hidden;
border-bottom: 1px solid #CFD8DC;
}
.nav ul, .nav li, label {
line-height: 25px;
margin: 0;
padding: 0 2em;
list-style: none;
text-decoration: none;
color: white;
font-weight: 100;
width: 100%;
}
.item ul {
padding: 0 0.25em;
}
.nav li a {
line-height: 25px;
margin: 0;
padding: 0 4em;
list-style: none;
text-decoration: none;
color: lightblue;
font-weight: 100;
}
		
	</style>
<body>
	<div class="nav">
	<input type="checkbox" id="menu"/>
		<label for="menu">&#9776;</label>
				<div class="multi-level">
			<div class="item">
			<input type="checkbox" id="A"/>
				<label for="A">Resources</label>
				
				<ul>
					<li><a href="#">About Us</a></li>
					<li><div class="sub-item">
					<input type="checkbox" id="A-B"/>
					<label for="A-B">Location Information</label>
					<ul>
						<li><a href="#">FacInfo</a></li>
						<li><a href="#">Specialty Phone/Pool List</a></li>
						<li><a href="#">Primary Care Direct Dial #s</a></li>
						
					</ul>
					
					</div></li>
				</ul>				
			</div>
			<div class="item">
				<input type="checkbox" id="B"/>
				<label for="B">Scheduling</label>
			<ul>
				<li><div class="sub-item">
					<input type="checkbox" id="B-A"/>
					<label for="B-A">Primary Care</label>
					<ul>
						<li><a href="#">Cold/Flu</a></li>
						<li><a href="#">UTI / Pink Eye</a></li>
						<li><a href="#">Trauma / Inuries</a></li>
						<li><a href="#">Common Injections</a></li>
						<li><a href="#">Nurse Visits</a></li>
						<li><a href="#">Depo Injections</a></li>
						<li><a href="#">Cortisone Injections</a></li>
						<li><a href="#">Physicals</a></li>
						<li><a href="#">All Job Aids</a></li>
					</ul>
					
					</div>
				</li>
				</ul>
			</div>
		
		
		</div>
	</div>

</body>
</html>

您实际上离工作解决方案不远了。最简单的方法是，接近您编写的内容，是.nav:hover ul {display:block}，但这会同时打开整个菜单，包括所有子菜单。只打开悬停项目的子菜单感觉好一点：

html,
body {
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
position: top;
}
.multi-level,
.item ul,
.nav input[type="checkbox"] {
display: none;
}
#menu:checked ~ .multi-level,
.item input:checked ~ ul {
display: block;
}
/* changes */
.nav:hover .multi-level,
.item:hover > ul,
.sub-item:hover > ul {
display: block;
}
/* /changes */
label:hover {
cursor: pointer;
}
label {
width: 100%;
display: block;
z-index: 3;
position: relative;
}
.nav {
width: 100%;
background-color: darkblue;
color: white;
overflow-x: hidden;
border-bottom: 1px solid #CFD8DC;
}
.nav ul,
.nav li,
label {
line-height: 25px;
margin: 0;
padding: 0 2em;
list-style: none;
text-decoration: none;
color: white;
font-weight: 100;
width: 100%;
}
.item ul {
padding: 0 0.25em;
}
.nav li a {
line-height: 25px;
margin: 0;
padding: 0 4em;
list-style: none;
text-decoration: none;
color: lightblue;
font-weight: 100;
}

<div class="nav">
<input type="checkbox" id="menu"/>
<label for="menu">&#9776;</label>
<div class="multi-level">
<div class="item">
<input type="checkbox" id="A"/>
<label for="A">Resources</label>
<ul>
<li><a href="#">About Us</a></li>
<li><div class="sub-item">
<input type="checkbox" id="A-B"/>
<label for="A-B">Location Information</label>
<ul>
<li><a href="#">FacInfo</a></li>
<li><a href="#">Specialty Phone/Pool List</a></li>
<li><a href="#">Primary Care Direct Dial #s</a></li>
</ul>
</div></li>
</ul>               
</div>
<div class="item">
<input type="checkbox" id="B"/>
<label for="B">Scheduling</label>
<ul>
<li><div class="sub-item">
<input type="checkbox" id="B-A"/>
<label for="B-A">Primary Care</label>
<ul>
<li><a href="#">Cold/Flu</a></li>
<li><a href="#">UTI / Pink Eye</a></li>
<li><a href="#">Trauma / Inuries</a></li>
<li><a href="#">Common Injections</a></li>
<li><a href="#">Nurse Visits</a></li>
<li><a href="#">Depo Injections</a></li>
<li><a href="#">Cortisone Injections</a></li>
<li><a href="#">Physicals</a></li>
<li><a href="#">All Job Aids</a></li>
</ul>
</div></li>
</ul>
</div>
</div>
</div>

有了这个，打开"调度"子菜单有点棘手。但它在大多数情况下都有效。而且你可以在没有JS的情况下做到这一点，所以你在某种程度上受到限制。但在大多数情况下，它运行良好...

相关内容

最新更新

热门标签：