HTML drop down sub menu

[frying_pan_cat]

I'm trying to create a drop down sub menu for my website and having a little trouble. I've got the submenu to drop down when I hover over the link, but when I try to move the mouse to any of the items in the submenu it disappears. Also the menu that drops down is not opaque to the content beneath it, so the text of the menu isn't readable so I was wondering how to get around this.

If possible I'd also like to make the submenu boxes at least as wide as the parent menu item, but larger if the text needs this. What's the best way to go about this?

My code for the menu is:

<style>
ul
{
text-align:center;
list-style-type:none;
margin:0;
padding:0em;
overflow:hidden;
display:block;
position:relative;
z-index:1;
}
li
{
display:inline-block;
float:none;
margin:0;
padding-right:0em;
position:relative;
}
a:link
{
display:block;
width:150px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px 10px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
.subMenu
{
visibility:hidden;
position:absolute;
}
.a li:hover .subMenu
{
visibility:visible;
position:absolute;
opacity:1;
}
</style>

<ul class="a">
<li><a href="index.php">Home</a></li>
<li class="has-sub"><a href="/">Menu Item 1</a>
	<ul class="subMenu">
		<li><a href="/">Submenu Item</a></li>
	</ul>
	</li>
<li><a href="/">Menu Item 2</a>
	<ul class="subMenu">
		<li><a href="/">Submenu Item</a></li>
		<li><a href="/">Submenu Item</a></li>
	</ul>
	</li>
<li><a href="/">Menu Item 3</a></li>
<li><a href="/">Menu Item 4</a></li>
<ul class="a">

 

[frying_pan_cat]

Thanks, that's made the me able to click the first item in each submenu, but the second submenu with 2 elements still disappears before I'm able to hover over the second element in it. Also it still doesn't appear to be opaque to the text directly beneath the menu bar.