28197 sujets

CSS et mise en forme, CSS3

Un coup de pouce sur un menu !

Bonjour,

J'aurais besoin d'un coup de pouce sur un menu css avec sous menu déroulant, il s'affiche nikel en firefox mais a quelques problèmes en explorer, je pense que le problème vient du javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>
function menu_over(obj){
	if(document.all){
		listeUl = obj.getElementsByTagName("ul");
		if(listeUl.length > 0){
			sousMenu = listeUl[0].style;
			if(sousMenu.display == "none" || sousMenu.display == ""){
				sousMenu.display = "block";
			}else{
				sousMenu.display = "none";
			}
		}
	}
}

function menu(){
	listeLi = document.getElementById("menu").getElementsByTagName("li");
	nLI = listeLi.length;
	for(i=0; i < nLI; i++){
		listeLi.onmouseover = function(){
			menu_over(this);
		}
		listeLi[i].onmouseout = function(){
			menu_over(this);
		}
	}
}
</script>

<style>
ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  width: 150px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
ul li {
  position: relative;
  display: block;
  color: #ffffff;
  background-color: #999999;
  padding: 5px;
  border: 1px solid #000000;
  margin-bottom: 1px;
}
li ul {
  position: absolute;
  left: 150px;
  top: -1px;
  display: none;
}
li ul li {
  background-color: #000000;
}
ul li a {
  color: #ffffff;
  text-decoration: none;
}
ul li a:hover {
  text-decoration: underline;
}
li:hover ul {
  display: block;
}
</style>

</head>

<body onload="menu();">
<div style="float: left; width: 150px; margin-right: 10px;">
<ul id="menu">
  <li><a href="link">Home</a></li>
  <li><a href="link">About</a>
    <ul>
	<li><a href="link">History</a></li>
	<li><a href="link">Team</a></li>
	<li><a href="link">offices</a></li>
	</ul>
  </li>
  <li><a href="link">Services</a>
    <ul>
	<li><a href="link">Public</a></li>
	<li><a href="link">Private</a></li>
	<li><a href="link">Other</a></li>
	</ul>
  </li>
  <li><a href="link">Contact</a>
    <ul>
	<li><a href="link">Map</a></li>
	<li><a href="link">Adress</a></li>
	<li><a href="link">Telephone</a></li>
	</ul>
  </li>
  <li><a href="link">Visit</a>
    <ul>
	<li><a href="link">Programme</a></li>
	<li><a href="link">Date</a></li>
	<li><a href="link">Calenda</a></li>
	</ul>
   </li>
</ul> 
</div> 
<div style="float: left; background-color:#990000; width: 250px; padding: 5px;  font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px;">
fgfgdfgdfgio dfgodfgn g dfgdf gdf g dgdfgdgdfgdfg dg dfgdf gdfjkg dfkg dg gdgjkdgdfkgdfgdjfkgg dfgj df
</div>  
</body>
</html>
[/i]
Sujet clos
Aller à