HTML List Styling with Links

Question

I have a menu that consists of an unordered list styled to look like a grid, the grid box changes color when the mouse hovers over it. Plain and simple. My problem is when I add a link to the text inside the li the hover basically breaks. (See the Fiddle below for reference and how hover is different between the link and non-link li)

I need to style the link to look the same way as the un-styled text when hovering over the grid, not just the actual link and make the entire grid box area clickable.

I've been messing with it for a while but can't get it to work the way I want it.

<style>
.admin-panel {
    overflow: hidden;

    li {
        float: left;
        width: 33%;
        height: 115px;
        padding: 10px;
        line-height: 1.4;
        text-align: center;
        background-color: #f9f9f9;
        border: 1px solid #fff;
    }

    li:hover, li a:hover {
        color: #fff;
        background-color: #778ba1;
    }

    .glyphicon {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 24px;
    }

    .admin-panel-class {
        display: block;
        text-align: center;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    }
}
</style>

<div class="admin-panel">
    <ul class="admin-panel-list">
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-list-alt"></span>
                <span class="admin-panel-class">My Workshops</span>
            </a>
        </li>
        <li>
            <span class="glyphicon glyphicon-star"></span>
            <span class="admin-panel-class">Create Workshop</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-pencil"></span>
            <span class="admin-panel-class">Edit Workshop</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-asterisk"></span>
            <span class="admin-panel-class">Resource Allocation</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-ok"></span>
            <span class="admin-panel-class">Reservation Approval</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-ok"></span>
            <span class="admin-panel-class">Facilities Reservation Approval</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-calendar"></span>
            <span class="admin-panel-class">Room Calendars</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-stats"></span>
            <span class="admin-panel-class">Global Reports</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-phone"></span>
            <span class="admin-panel-class">Sing-In Tablets</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-th-list"></span>
            <span class="admin-panel-class">Menu Editor</span>
        </li>
        <li>
            <span class="glyphicon glyphicon-user"></span>
            <span class="admin-panel-class">Edit Users</span>
        </li>
    </ul>
</div>

Fiddle

Answer 1

All anchor (a) tags have default styling when it comes to text colors (unlike span tags which inherit the color from their parent). In the code provided in question, you were applying the color to the li element when it is hovered and to the a element only when the a itself is hovered.

li:hover, li a:hover {
  color: #fff;
  background-color: #778ba1;
}

Instead of the above, apply the color to the a element also when the li is hovered on. This would fix the hover text color problem.

li:hover, li:hover a {
  color: #fff;
  background-color: #778ba1;
}

---

For making the entire grid box area as clickable, you would need to set the display property of the anchor as either block or inline-block and give it 100% width and height of the parent. Note that this would still leave the padding area of the grid as unclickable.

.admin-panel-list li a{
  display: inline-block;
  height: 100%;
  width: 100%;
}

If you need the padding area also to be clickable then remove the padding from the li and add it to the a instead (like given below):

.admin-panel-list li a {
  display: inline-block;
  padding: 10px;
  height: 100%;
  width: 100%;
}