CSS headerに設定したulのクラスが下の階層のulにも反映されてしまうため、反映されないようにする方法


`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]




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

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




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

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

