How to highlight a whole cell when hovering over link


Tags: html,css,hyperlink,highlight,css-tables

Problem :

I have a horizontal nav bar where I would like to highlight the entire cell the link is in when I hover over the link, however, I can only get the immediate area around the text to highlight. I would greatly appreciate any pointers on how I can achieve this.

Here is my JS Fiddle: http://jsfiddle.net/PYKXb/1/

This is my CSS code:

#horizontal-style {
    display: table;
    width: 100%;
    margin:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
}

#horizontal-style li {
    display: table-cell;
    vertical-align:middle;
    height:auto;
    padding:1%;
}

#horizontal-style a:link {
    display: block;
    border: none;
    text-align: center;
    margin:auto;
    padding:none;
    background:#ebebec;
    color:#005da4;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:90%;
    display:inline-block;
    vertical-align:middle;
}

#horizontal-style a:visited {
    display: block;
    border: none;
    text-align: center;
    margin:auto ;
    padding:none;
    background: #ebebec;
    color:#005da4;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:90%;
    display:inline-block;
    vertical-align:middle;
}

#horizontal-style a:hover {
    display: block;
    border: none;
    text-align: center;
    margin:auto ;
    padding:none;
    background: #acce39;
    color:#005da4;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:90%;
    display:inline-block;
    vertical-align:middle;
}

#horizontal-style a:hover {
    display: block;
    border: none;
    text-align: center;
    margin:auto ;
    padding:none;
    background: #acce39;
    color:#005da4;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:90%;
    display:inline-block;
    vertical-align:middle;
}

This is my HTML code:

<ul id="horizontal-style">
    <li><a href=# >Home</a></li>
    <li><a href=# >About Us</a></li>
    <li><a href=# >Online<br />Courses</a></li>
    <li><a href=# >Registration</a></li>
    <li><a href=# >Faculty</a></li>
    <li><a href=# >Calendar</a></li>
    <li><a href=# >Store</a></li>
    <li><a href=# >Testimonials</a></li>
    <li><a href=# >Online<br/>Lectures</a></li>
    <li><a href=# >Contact Us</a></li>
    <li><a href=# >Forum</a></li>
</ul>


Solution :

This works fine, have a look here

#horizontal-style li {
    display: table-cell;
    vertical-align:middle;
    height:auto;
    padding:1%;
    background:#ebebec;
}
#horizontal-style li:hover{
    background-color:#acce39;
}

    CSS Howto..

    How do i resize an image based on its div width? [duplicate]

    How to grouply select multi elements CSS?

    How to line up lists side by side?

    How to get Susy going with a CSS only toggle navigation

    How to give slide down effect when hover?

    How to align images in a mosaic style? html/css

    How to stop default CSS in asp.net [closed]

    How to slide down to show content of DIV using CSS/jQuery?

    Css styling without !important - how to do this?

    How to use the Xpath and CSS selector in for function

    How to make CSS visible only for Android phone UC browser

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How to set img tag vertical center : html + css

    How to make to div comes the one under the other

    How to show something only when user prints?

    How can I make responsive image take up 100% of its parent's height?

    how to unset max-height?

    How to make links in line

    How do you measure the height of a HTML element scaled with CSS3 transform?

    How to double an image size in HTML using only CSS?

    CSS Flexbox : How to construct a specific layout

    I have a standard table with text inside. How do I vertical align this?

    How to copy the html contents of one iframe to another iframe including CSS?

    How to make text labels stick next to an image in CSS?

    How to set gulp autoprefixer that it will be prefix css when I save my project

    How to make floated columns stretch to fill container vertically?

    How to add media attribute to ASP.NET MVC4 style bundle

    AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

    HTML: How to add an image using CSS as linked style sheet

    How can I line up the two containers in view?