CODEWITHSUNDEEP
htmlcss
Gerrit ten Napel
Gerrit ten Napel

Reputation: 149

Changing background color hovering over different li a

I got my navigation bar to work nicely but I need to have different colors in the backgrounds of each element. I tried giving them ID's and using it in CSS but it doesn't work. The "info day"should be firebrick(red) but "course"and "locations" should be two different colors. Can anyone one help me out?

.menuUl {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-left: none;
  border-right: none;
}
.menuLi {
  float: left;
  border: none;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: firebrick;
  border-radius: 5px;
}
<ul class="menuUl">
  <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a>
  </li>
  <li class="menuLi" id="infoDay"><a href="">INFO DAY</a>
  </li>
  <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a>
  </li>
</ul>

Upvotes: 4

Views: 85

Answers (2)

vishnu
vishnu

Reputation: 2948

Hope this helpful:

.menuUl{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-left: none;
    border-right: none;
}
.menuLi{
    float: left;
    border: none;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li:nth-child(1) a:hover {
    background-color: blue;
    border-radius: 5px;
}
li:nth-child(2) a:hover {
    background-color: firebrick;
    border-radius: 5px;
}
li:nth-child(3) a:hover {
    background-color: black;
    border-radius: 5px;
}
<ul class="menuUl">
    <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li>
    <li class="menuLi" id="infoDay"><a href="">INFO DAY</a></li>
    <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a></li>
</ul>

Upvotes: 5

ab29007
ab29007

Reputation: 7766

I change their font-color for visibility in the snippet-demo but the main idea is to use them like this li#infoDay a:hover. Its specific to id's and changing their order wont affect the css

.menuUl{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-left: none;
    border-right: none;
}
.menuLi{
    float: left;
    border: none;
}
li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    
    border-radius: 5px;
}
li#courses a:hover{
  background-color: blue;
}
li#locations a:hover{
  background-color: green;
}
li#infoDay a:hover{
  background-color: firebrick;
}
<div>
  <ul class="menuUl">
    <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li>
    <li class="menuLi" id="infoDay"><a href="">INFO DAY</a></li>
    <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a></li>
</ul>

  </div>

Upvotes: 3

Related Questions