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 to change visibility of Calendar on textbox click

    How to auto resize the parent node according to its children

    How to get CSS file to affect only a section of HTML

    How do I resize a div relative to browser window size?

    How to remove default chrome style for select Input?

    How can I modify footer color dynamically when I switch to another page in html and css

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    How can I get a CSS class selector to override the input[readonly] selector?

    How to check a website in BlackBerry Simulator

    How can I add a transition effect when opening my custom modal window?

    Sencha Touch 2 date picker component & css: how to display hidden column names?

    How can I position list in
    ?

    How to move an image upwards in html/css

    How to override position : absolute in css?

    CSS - how to set up header images as use eg. Facebook?

    How to get MetroUI CSS Datepicker value with javascript

    How to fill margin space with divs and give it styles?

    how to add items into a CSS based text rotator (similar to news ticker)

    How to add a background to text only?

    How to fix the css padding

    How to scroll a page or a element using css

    How to prevent blur from CSS transform?

    how to apply css rule to the previous and the next element in HTML?

    How to make an image follows scrolling until a certain point

    How to set css for first div, if there's no second div

    How to override CSS for TextBoxFor field?

    How to change tooltip color on open using jQuery UI Tooltip?

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    How do I use a variable inside of a shorthand if/else statement in a PHP for() loop?

    How to calculate total size of all css,js and html pages separately uing shell script?