私のulスタイルは1つのクラスにしか適用されません

Question

私は既にulとliのために私のスタイルを作り、OKの作業をしていました。

右側には部分図があり、すべてに合わせてあります。

しかし、今、私は別の領域に他のul liに影響を与えることに気づきました。 クラス.menuHeaderを追加します。

.menuHeader ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: black; 
    } 

    .menuHeader li { 
     float: left; 
     text-decoration: none; 
    } 

     .menuHeader li a { 
      display: block; 
      color: white; 
      text-align: center; 
      padding: 14px 16px; 
      text-decoration: none; 
     } 

      .menuHeader li a:hover:not(.active) { 
       background-color: #B0B0B0; 
       color: black; 
       text-decoration: none; 
      } 

正常なリンクは引き続き正常です。

<ul class="menuHeader"> 
    <li class="menuHeader">@Html.ActionLink("Main", "Index", "Home", null, new { @class = activeHome })</li> 
    <li class="menuHeader">@Html.ActionLink("Tracker", "Index", "Tree", null, new { @class = activeTracker })</li> 
    <li class="menuHeader">@Html.ActionLink("Contact", "Contact", "Home", null, new { @class = activeContact })</li> 
    <li class="menuHeader">@Html.ActionLink("About", "About", "Home", null, new { @class = activeAbout })</li> 

しかし、部分的な表示ではなく、項目リストのドットも表示されます。だから私はいくつかの他の属性を定義する必要があるように見えます。何が欠けているのか？

using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) 
{ 
    @Html.AntiForgeryToken() 

<ul class="menuHeader"> 
    <li id="login_area1" class="menuHeader"> 
     @Html.ActionLink(strHello, "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" }) 
    </li> 
    <li class="menuHeader"> 
     <a href="javascript:document.getElementById('logoutForm').submit()" id="logoutLink" style="color:red"> 
      Log off 
      <img src="@Url.Content("~/Content/Logout-icon-door.png")"> 
     </a> 
    </li> 
</ul> 
} 

Answer 1

あなたはulとli

プラスこのため、同じクラスを持つべきではない：.menuHeader ul {がある、親が子供として、ULを持つクラス.menuHeaderを持っているだろうと言っていますあなたのコードであなたが持っているものではありません。

はちょうど.menuHeader

.menuHeader { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: black; 
 
} 
 
.menuHeader li { 
 
    float: left; 
 
    text-decoration: none; 
 
} 
 
.menuHeader li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
.menuHeader li a:hover:not(.active) { 
 
    background-color: #B0B0B0; 
 
    color: black; 
 
    text-decoration: none; 
 
}

<ul class="menuHeader"> 
 
    <li class="menuHeaderItem"> 
 
    <a class="active" href="#">asdas</a> 
 
    </li> 
 
    <li class="menuHeaderItem"> 
 
    <a href="#">asdas</a> 
 
    </li> 
 
    <li class="menuHeaderItem"> 
 
    <a href="#">asdasda</a> 
 
    </li> 
 
    <li class="menuHeaderItem"> 
 
    <a href="#">asdasda</a> 
 
    </li> 
 
</ul>