[英]why my dropdown menu is not working in the div?
**
这是我的菜单和下拉菜单的html代码不起作用,还有什么地方不能正常工作。这是部分简单的代码,以后将在其中嵌入wordpress
** <div class="menu-logo"> <div class="container"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <ul class="menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <ul class="submenu"> <li><a href="#">LONG </a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">COST</a></li> </ul> <li><a href= "#">ROOM</a></li> </ul> </div> **
这是我的下拉菜单的CSS代码。
**
.menu-logo {
margin-top: 9px;
background: #999;
}
ul.menu {
list-style-type: none;
/* display: inline-block; */
margin-top: 34px;
position: relative;
}
ul.menu li {
font-family: 'Roboto Condensed', sans-serif;
padding: 7px 12px 5px 12px;
display: inline-block;
}
ul.menu li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
ul.submenu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
display: none;
/* display: inline-block; */
}
ul.submenu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
ul.submenu a:hover {background-color: #f1f1f1}
}
ul li a:hover ul.submenu {
display: block;
}
将UL标签放在其父LI标签中时,子菜单代码将起作用
如下所示:
<div class="menu-logo">
<div class="container">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<ul class="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a>
<ul class="submenu">
<li><a href="#">LONG </a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">COST</a></li>
</ul>
</li>
<li><a href= "#">ROOM</a></li>
</ul>
</div>
并且CSS代码更改为:
ul li:hover ul.submenu {
display: block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.