As long as your hover styles are on the LI instead of the anchor, it should work as seen in this basic example:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
<style type="text/css">
ul li {float: left; width: 200px; background: #ddd;}
ul li ul li {float: none;}
ul li:hover {background: #aaa;}
ul li ul {display: none;}
ul li:hover ul {display: block;}
</style>
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
</head>
<body>
<ul>
<li><a href="#">Hover for dropdown</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
</ul>
</li>
<li><a href="#">Hover for dropdown 2</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
</ul>
</li>
</ul>
</body>
</html>
Bookmarks