Hello everyone! I'm currently working on styling my very first website and I've run into an issue with my secondary menu. Right now, only the text is linked and I need to change it so that the entire list item acts as a link.
I'm looking to achieve this using CSS only, not Javascript.
You can view the live version of my website here: (you'll notice multiple submenus, all styled with the same CSS / HTML).
HTML:
<nav class="submenu">
<ul>
<li><span class="text"><a href="#">GAME SERVERS </a></span><span class="arrows"></span></li>
<li><span class="text"><a href="#">BAN LIST </a></span><span class="arrows"></span></li>
<li><span class="text"><a href="#">UNBAN REQUESTS </a></span><span class="arrows"></span></li>
<li><span class="text"><a href="#">ADMINS </a></span><span class="arrows"></span></li>
</ul>
</nav>
CSS:
.submenu{
color: #1a6eb6;
display: inline-block;
height: 50px;
width:780px;
}
.submenu ul {
margin-left: 20px;
padding-left: 0px;
}
.submenu ul li{
list-style-position: inside;
list-style-type: none;
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
height: 38px;
width: 187px;
display: inline-block;
color: #1a6eb6;
}
.submenu ul li:hover {
background-image: url("images/shop_menu_bg_hover.png");
width: 187px;
height: 38px;
}
.submenu ul li .text{
color: #1a6eb6;
display: inline-block;
height: 31px;
width:115px;
line-height: 28px;
margin-left: 5px;
}
.submenu ul li .arrows{
background-image: url("images/arrows.png");
background-repeat: repeat-x;
display: inline-block;
height: 17px;
width: 14px;
margin: 0px 0px 0px 45px;
vertical-align: middle;
}
.submenu ul li:hover .arrows{
background-position: -3px -14px;
}
Can anyone provide some guidance on how to accomplish this?
p.s. Thank you for taking the time to read this post :)