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 display an HTML list non-nested?

    How to place an image on top of Bootstrap NavBar while keeping links clickable?

    How do I control the height of the main content area no matter how much text is in there?

    How to auto adjust wrapper height when padding is applied to inner elements

    How to collapse div same like facebook chat

    How come the first

    How to vertically and horizontally center two images inside a div on a responsive page

    How can I use a data attribute to set a background-image in CSS?

    How to use CSS to make an input fields behaves like a button click?

    How to order a css file?

    Jquery: how to get menu to expand towards the right instead of the left

    How to change text color for all links in Materialize CSS navbar?

    How often to use REM in CSS [closed]

    How to make text in transparent div opaque? [duplicate]

    How to CSS triangle at the bottom and center it in div ( Horizontal Menubar )? [closed]

    How to tell if text is overflowing in a table cell in Firefox?

    CSS Layout. Can not get idea how to fix it

    how to change the background color of first row in html table and all other rows alternate color

    How to show/hide content on click with CSS

    How to select an element's great-grandchild for CSS rules?

    How to apply effects to a unicode character in CSS? [closed]

    How can I convert a SASS file to a CSS file in an ANT task?

    How to avoid calling “fonts.googleapis.com/css?family=..” for my CSS files

    How to change color of the selected item from a Xul listbox?

    How to apply Javascript conditionally on a specific css-class only?

    How to perfectly center contents in an unordered list?

    How to toggle visibility of 2 divs after clicking a mailto link?

    How to declare a div in @page @top-left

    how to get double border in using CSS?

    Switching styles (Class) on a function that show and hide a div tag content