Juan Carlos Oropeza Juan Carlos Oropeza - 5 months ago 7
CSS Question

How make my UL style only apply to a class

I already make my style for

ul
and
li
and was working OK.

On the right side there is a partial view and is align with everything.

enter image description here

But now I realized was affecting other
ul li
in different area.
So I add a class
.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;
}


The normal links still work ok.

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


But for the partial view isnt and also appear the dot for the item list. So looks like I need define some other attributes there. Any idea what is missing?

enter image description here

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

you shouldn't have the same class for ul and li

plus this: .menuHeader ul { is saying that a parent will have a class .menuHeader having a ul as child, which is not what you have in your code.

Should be just .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>