Itay Grudev Itay Grudev - 14 days ago 5
CSS Question

HTML/CSS Issue - width: 100% not expanding

This is the link to the jsFiddle. Notice that the anchor (#nav>li>a) doesn't expand as it is supposed to when it is said:

#nav li a {
width: 100%;
height: 100%;
}


Any suggestions?

Answer

You have to make the <a> a block element and give some width to its parent

#nav {
  width: 100%;
  overflow: hidden;
}
#nav li {
  float: left;
  height: 40px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  width: 100%;
}
#nav li a {
  width: 100%;
  height: 100%;
  display: block
}
#nav li a:hover {
  background: #0ff;
}
<ul id="nav" class="top">
  <li><a href="">Home</a></li>
  <li><a href=""><img src="" alt=""></a></li>
  <li><a href=""><img src="" alt=""></a></li>
  <li><a href=""><img src="" alt=""></a></li>
</ul>

Comments