文章/答案/技术大牛

发布

社区首页 >问答首页 >使复选框菜单在悬停时下拉

问使复选框菜单在悬停时下拉
EN

Stack Overflow用户

提问于 2019-08-20 22:01:14

回答 1查看 398关注 0票数 1

我已经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>

html

css

hover

dropdown

回答 1

Stack Overflow用户

发布于 2019-08-20 22:25:20

实际上，您离一个有效的解决方案不远了。最简单的方法是，接近你所写的，是.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的情况下做到这一点，所以你受到了某种程度的限制。但在大多数情况下，它工作得很好……

票数 0

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

原文链接：

https://stackoverflow.com/questions/57575402

复制

相似问题

问使复选框菜单在悬停时下拉
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使复选框菜单在悬停时下拉EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使复选框菜单在悬停时下拉
EN