Anonymous

<!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="fr" lang="fr">
<head>
<title>Expanding horizontal menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
function ovr(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!--
/* CSS from tutorials of www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
font: 11px verdana, arial;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
}
#menu dt {
cursor: pointer;
text-align: center;
}
#menu dd {
position: absolute;
display: none;
border: 1px solid #fff;
color: #fff;
margin-top: .1px;
}
#menu li {
text-align: left;
background: #EA5F00;
}
#menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 19px;
border: 0px none;
}
#menu li a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: .5px solid #fff;
padding-left: 5px;
}
#menu li a:hover {
height: 18px;
background: #F29500;
}
#menu dt a:hover {
height: 19px;
background-image: url('images/nav/m_over.gif');
}
-->
</style>
</head>

<body>
<table style="width: 100%; height: 21px; background: #E7E7E7;" cellpadding="0" cellspacing="0"><tr><td align="center">
<table style="width: 800px;height: 19px; background-image: url('images/nav/nav_bg.gif'); line-height: 18px;" cellpadding="0" cellspacing="0">
       <tr>
       <td>

<div id="menu">
        <dl style="width: 78px; color: #fff;">
		<dt onmouseover="javascript:ovr();"><a href="" title="">No Menu</a></dt>
	</dl>

        <dl style="width: 3px; height: 19px; color: #fff;">
		<dt><img src="images/nav/seperator.gif" /></dt>
	</dl>

 	<dl style="width: 151px; color: #fff;">
                <dt onmouseover="javascript:ovr();"><a href="" title="">No Menu</a></dt>
	</dl>

        <dl style="width: 3px; height: 19px; color: #fff;">
		<dt><img src="images/nav/seperator.gif" /></dt>
	</dl>

	<dl style="width: 123px; color: #fff;">
		<dt onmouseover="javascript:ovr('smenu1');"><a href="" title="">Menu</a></dt>
			<dd id="smenu1">
				<ul style="width: 171px;">

					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
     					<li><a href="#">Link 5</a></li>
				</ul>

			</dd>
	</dl>

        <dl style="width: 3px; height: 19px; color: #fff;">
		<dt><img src="images/nav/seperator.gif" /></dt>
	</dl>

	<dl style="width: 97px; color: #fff;">
		<dt onmouseover="javascript:ovr('smenu2');"><a href="" title="Menu">Menu</a></dt>
			<dd id="smenu2">
				<ul style="width:97px;">
					<li><a href="#">Link 6</a></li>
					<li><a href="#">Link 7</a></li>
				</ul>
			</dd>
	</dl>
	<dl style="width: 3px; height: 19px; color: #fff;">
		<dt><img src="images/nav/seperator.gif" /></dt>
	</dl>
</div>
</td>
       </tr></table>
       </td></tr></table>



</body>
</html>