0

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>
  

0

1 件の回答 1

1

子孫結合子の代わりに子結合子を使い、装飾を適用する要素を限定することで、今回のような意図しない装飾の適用を回避することが出来ます。実現したい動作が具体的に書かれていないため、すべての子孫結合子を子結合子に置換した例を示します。

.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 {
  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>

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。