Question

The hover rules are not being applied. When I view in firebug it doesn’t seam to load the rule at all.

What is the correct way to implement the hover below?\

The html markup is:

<li class="ui-menu-item" role="menuitem"><a target="_blank" title="Click here" href="http://........" class="ui-corner-all" tabindex="-1">
<span class="apptitle">Some Text here</span>
<br>
<span class="descrip">Some Description</span>
</a>
<a target="_blank" href="http://......" class="ui-corner-all" tabindex="-1"><img src="someimg.gif">Please click here for support</a>     
<hr align="center" width="80%"></li>

Thanks

* html .ui-autocomplete {
width: 400px;
height: 200px;
}
.apptitle, .apptitle a, .apptitle a:active, .apptitle a:visited {
color: #0080FF;
font-weight: bold;

}
 .apptitle a:hover{
text-decoration: underline; 
}
.title {
text-align: left;
}
.descrip, .descrip a, .descrip a:active, .descrip a:visited {
padding-left: 10px;
padding-top: 10px;
text-align: left;
color: #000000
}
.descrip a:hover{
 color: #FF6600
}

Answer 1

Rewriting your codes for sake of simplicity first.

HTML

<li class="ui-menu-item" role="menuitem">
    <a href="xxx" class="ui-corner-all">
        <span class="apptitle">Some Text here</span>
        <br>
        <span class="descrip">Some Description</span>
    </a>
    <a href="yyy" class="ui-corner-all" tabindex="-1">
        <img src="someimg.gif">
        Please click here for support
    </a>
    <hr align="center" width="80%">
</li>

CSS

* html .ui-autocomplete {width: 400px; height: 200px;}

.apptitle, .apptitle a, .apptitle a:active, .apptitle a:visited {
color: #0080FF;font-weight: bold;
}
 .apptitle a:hover {text-decoration: underline;}

.title {text-align: left;}

.descrip, .descrip a, .descrip a:active, .descrip a:visited {
padding: 10px 0px 0px 10px; text-align: left; color: #000000
}

.descrip a:hover {color: #FF6600;}

OK, now we can analyze it.

For your hovers, you are using:

.apptitle a:hover {}
.descrip a:hover {}

However, in the HTML structure we see the apptitle is a span inside a link, and without any inside it, thus the rule will not work.

You can use

.apptitle:hover

directly, fetching the hover on span tag. This works well with all major browsers, expect IE6, and dunno about IE7. IE8+ works fine.

Or alternatively you can use:

a:hover .apptitle {}

This ensure the rules will apply only to span at link hover.

In a last word: the problem was in your selectors. Hope you enjoy the solutions.