CSS headerに設定したulのクラスが下の階層のulにも反映されてしまうため、反映されないようにする方法
header-dropmenu
に設定しているul/li aのcssが下層にも反映されてしまい、
control-sidebar-menu
のcssを反映させることができません。
control-sidebar-menu
のul/liのcssを反映させるためにはどのようにしたらよいか教えていただけないでしょうか。
.header-dropmenu {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
table-layout: fixed;
}
.header-dropmenu li {
position: relative;
vertical-align: middle;
border: 1px solid #f8f8f8;
background: #f8f8f856;
}
.header-dropmenu li a {
display: block;
text-align: center;
line-height: 40px;
font-weight: bold;
text-decoration: none;
font-size: 14px;
}
.header-dropmenu li ul {
/* visibility: hidden; */
width: 100%;
list-style: none;
position: absolute;
top: 100%;
left: -1px;
margin-top: 70px;
padding: 0;
}
.header-dropmenu > li:hover {
background: #fff;
}
.global-menu {
margin: 0 auto;
padding: 20px 0;
width: 100%;
}
.global-menu-header {
padding-left: 5%;
}
.global-menu-contents {
padding-top: 30px;
margin: 0 auto;
width: 95%;
}
.control-sidebar-menu {
list-style: none;
padding: 0;
margin: 0 -15px;
}
.control-sidebar-menu li a {
font-weight: normal;
}
.control-sidebar-menu li ul {
margin-top: 0 !important;
}
<ul class="header-dropmenu">
<li>
<a href="" class="logo">
<i class="fa fa-home home-icon"></i>
</a>
<ul>
<li>
<div class="box box-primary global-menu">
<div class="box-body global-menu-contents">
<div class="row">
<div class="col-sm-2">
<h5>aaa</h5>
<ul class="control-sidebar-menu">
<li>
<a href="">
<p>hoge</p>
</a>
</li>
<li>
<a href="">
<p>hoge</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>