Question

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

Answer 1

您实际上离可行的解决方案不远。最简单的就是.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就可以做到这一点，因此您受到某种限制。但在大多数情况下，它的效果都很好...

将鼠标悬停在复选框菜单上

1 个答案: