59155


`header-dropmenu`に設定しているul/li aのcssが下層にも反映されてしまい、  
`control-sidebar-menu`のcssを反映させることができません。

`control-sidebar-menu`のul/liのcssを反映させるためにはどのようにしたらよいか教えていただけないでしょうか。

[code]

    .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;
    }
[/code]

[code]

      
        <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>
      
[/code]


CC BY-SA 4.0
2019-09-19T05:07:53.277
59154
2019-09-19T06:27:19.183
2019-09-19T05:53:38.633
35901
35901
question
css
CSS headerに設定したulのクラスが下の階層のulにも反映されてしまうため、反映されないようにする方法


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

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-09-19T06:27:19.183
59155
2019-09-19T06:27:19.183
32986
59154
answer