Horizontal navigation bar with horizontal sub menu's "onhover"

HTML & CSS
1

HI all, I am trouble trying to build a horizontal navigation bar the will have sub menu’s that will appear underneath and across the second row horizontally when “onhover’ing” over the main menu item, the sub menu will remain available to click on, I am using an unordered list from a hodgepodge of tutorials, and I have made a pig’s breakfast of it.

CSS

.navigation ul {
margin:0px;
padding:0px;
}
.navigation li {
display:inline;
height:30px;
list-style:none;
margin-left:15px;
margin-right:15px;
}
.navigation li a {
text-decoration:none;
}
.navigation li a:hover {
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
display:none;
display:inline-block;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}
.navigation li:hover ul
{
display:block;
width:160px;
}
.navigation li li {
list-style:none;
display:list-item;
}

HTML

<div class=“navigation”><ul>
<li><a href=“index.html”>menu1</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

																						&lt;li&gt;&lt;a href="menu2.html"&gt;menu2&lt;/a&gt;
																							&lt;ul&gt;
                  				&lt;li&gt;sub menu item 1&lt;/li&gt;
                  				&lt;li&gt;sub menu item 2&lt;/li&gt;
                  				&lt;li&gt;sub menu item 3&lt;/li&gt;
                  				&lt;li&gt;sub menu item 4&lt;/li&gt;
                  						&lt;/ul&gt;
                  							&lt;/li&gt;
           																	
																						&lt;li&gt;&lt;a href="menu3.html"&gt;menu3&lt;/a&gt;
																							&lt;ul&gt;
                  				&lt;li&gt;sub menu item 1&lt;/li&gt;
                  				&lt;li&gt;sub menu item 2&lt;/li&gt;
                  				&lt;li&gt;sub menu item 3&lt;/li&gt;
                  				&lt;li&gt;sub menu item 4&lt;/li&gt;
                  						&lt;/ul&gt;
                  							&lt;/li&gt;
           																	
																						&lt;li&gt;&lt;a href="menu3.html"&gt;menu3&lt;/a&gt;
			&lt;ul&gt;
                  				&lt;li&gt;sub menu item 1&lt;/li&gt;
                  				&lt;li&gt;sub menu item 2&lt;/li&gt;
                  				&lt;li&gt;sub menu item 3&lt;/li&gt;
                  				&lt;li&gt;sub menu item 4&lt;/li&gt;
                  						&lt;/ul&gt;
                  							&lt;/li&gt;
           																	
																						&lt;li&gt;&lt;a href="menu4.html"&gt;menu4&lt;/a&gt;
												
			&lt;ul&gt;
                  				&lt;li&gt;sub menu item 1&lt;/li&gt;
                  				&lt;li&gt;sub menu item 2&lt;/li&gt;
                  				&lt;li&gt;sub menu item 3&lt;/li&gt;
                  				&lt;li&gt;sub menu item 4&lt;/li&gt;
                  						&lt;/ul&gt;
                  							&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
2

Try something more like this:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
.navigation ul {
margin:0px;
padding:0px;
list-style: none;
}
.navigation li {
float: left;
height:30px;
margin-left:15px;
margin-right:15px;
[COLOR="#FF0000"]position: relative;[/COLOR]
}
.navigation li a {
text-decoration:none;
}
.navigation li a:hover {
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
[COLOR="#FF0000"]position: absolute;
left: -9999px;[/COLOR]
height:30px;
}
.navigation li:hover ul
{
[COLOR="#FF0000"]left: 0;[/COLOR]
width:160px;
}

</style>
	
</head>

<body>


<div class="navigation"><ul>
<li><a href="index.html">menu1</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

<li><a href="menu2.html">menu2</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

<li><a href="menu3.html">menu3</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

<li><a href="menu3.html">menu3</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>

<li><a href="menu4.html">menu4</a>

<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li></ul></div> 


</body>

</html>