Drake Drake - 5 months ago 15
CSS Question

Hover changes all my li tags

I have this code, It's just a simple list to make a menu



ul li {
position: relative;
top: 55px;
height: 30px;
background: #212;
display: inline-block;
width: 29%;
margin: 1%;
margin-bottom: 0;
padding: 5px;
-webkit-border-top-right-radius: 30px;
-moz-border-top-right-radius: 30px;
-ms-border-top-right-radius: 30px;
-o-border-top-right-radius: 30px;
border-top-right-radius: 30px;
-webkit-border-top-left-radius: 30px;
-moz-border-top-left-radius: 30px;
-ms-border-top-left-radius: 30px;
-o-border-top-left-radius: 30px;
border-top-left-radius: 30px;
}
ul li:hover {
box-shadow: 1px 1px 10px white;
position: relative;
top: 20px;
height: 60px;
padding-top: 1.5em;
font-size: 20px;
}

<ul>
<a href="#">
<li>MENU</li>
</a>
<a href="#">
<li>CARDS</li>
</a>
<a href="#">
<li>CONTACT</li>
</a>
</ul>





This creates the effect I want on my menu buttons, but for some reason the
padding-top
and
font-size
parts apply to all
li
, not just the one I
hover
over.

If I remove that two, the
box-shadow
, and relative positioning will only affect the hovered object.

How can I make it only affect the button I hover over?

I know I could give each button an ID and use
ID:hover
, but isn't there a shorter code solution?

Answer

Your HTML is invalid, you can only have li as direct child of ul

Change that and remove everything from :hover rule except font-size and box-shadow (exactly those you were only removing) and apply the padding you had in li to a

ul li {
  list-style: none;
  position: relative;
  top: 55px;
  height: 30px;
  background: #212;
  float: left;
  width: 29%;
  margin: 1% 1% 0;
  border-radius: 30px 30px 0 0
}
ul li a {
  padding: 5px;
  display: block;
  color: white;
  text-align: center
}
ul li:hover a {
  box-shadow: 1px 1px 10px red;
  font-size: 20px;
}
<ul>
  <li>
    <a href="#">MENU</a>
  </li>
  <li>
    <a href="#">CARDS</a>
  </li>
  <li>
    <a href="#">CONTACT</a>
  </li>
</ul>