bmacrevolution bmacrevolution - 4 months ago 8
HTML Question

How can I get the <a> element to fill the <li> in this table so that each cell is a link and not just the text?

Hey there can anyone help me out. I am creating a table as a submenu on a website and I am unable to figure out how I can get the < a > element to fill the < li > in this table so that each cell is a link and not just the text

<ul>
<li class="list-heading">Important Services</li>
<li class="red-elem"><a href="#">Home</a></li>
<li class="red-elem"><a href="#">About</a></li>
<li class="red-elem"><a href="#">Our Work</a></li>
<li class="red-elem"><a href="#">Services</a></li>
<li class="red-elem"><a href="#">Contact</a></li>
</ul>
<style>
.list-heading {
font-family: Roboto;
font-weight: 500;
font-size: 150%;
padding: 20px;
background-color: #ac0303;
color: #FFFFFF;
border-bottom: 1px black solid;
margin-bottom: 0px;
}
.red-elem {
font-family:Roboto;
font-weight: 100;
font-size: 150%;
margin-top: 0px;
padding: 20px;
background-color: #ac0303;
border-bottom: 1px black solid;
}
.red-elem a {
color: white;
}
</style>

Answer

add display block to your a tag see the updated code below

<ul>
   <li class="list-heading">Important Services</li>
   <li class="red-elem"><a href="#">Home</a></li>
   <li class="red-elem"><a href="#">About</a></li>
   <li class="red-elem"><a href="#">Our Work</a></li>
   <li class="red-elem"><a href="#">Services</a></li>
   <li class="red-elem"><a href="#">Contact</a></li>
</ul>
<style>
.list-heading {
  font-family: Roboto;
  font-weight: 500;
  font-size: 150%;
  padding: 20px;
  background-color: #ac0303;
  color: #FFFFFF;
  border-bottom: 1px black solid;
  margin-bottom: 0px;
}
.red-elem {
  font-family:Roboto;
  font-weight: 100;
  font-size: 150%;
  margin-top: 0px;
  padding: 20px;
  background-color: #ac0303;
  border-bottom: 1px black solid;
}
.red-elem a {
  color: white;
  display:block;
}
</style>

Comments