Question

I want to add a block hover effect on my menu. However, the template that I bought has a large stylesheet that looks like it came out of Darth Vader’s rear end – and my coding knowledge is limited making this task difficult.

Here is a fiddle of the menu part of my site (it contains the entire stylesheet as well): http://jsfiddle.net/VjhJ4/

Upon hover, I want a block hover effect with each menu link having a different block color, see this picture as example (note that I want the block to be small when the mouse is not on it): https://i.stack.imgur.com/6aYeQ.png

I came across a script that does this.
HTML:

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
</div> 

CSS:

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
    width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

I read that hover only works in certain IE versions on anchor elements so I would presume that this technique is the best one to go with.

Now, how can I add this to my own page? Feel free to update the fiddle: http://jsfiddle.net/VjhJ4/
And please let me know if you would need any more info.

Answer 1

You need to add border-bottom and background color on hover.

See this Demo http://jsfiddle.net/enve/VjhJ4/7/