18041 sujets

Questions générales et questions de débutants

Probléme bizarre placement liste

bonjour,
je viens vous voir car j'ai un souci que je n'arrive pas a m'expliquez :s

J'ai mon header (un div), dedans je place une liste horizontale (mon menu) a 2 niveau, pour mes test j'ai mis une bordure a mon header,et ma liste et bien placé, mais pour l'exploitation j'enléve cette bordure et la ma lite ce positionne au dessus du header ... j'avoue que je comprend pas du tout...

Je vous met les codes:

html:

<body>

<div id="global">
     <div id="header">
		
            <!-- debut menu horizontale -->
            
             <ul id="nav">			
                  <li>
		<a href="#">rub1</a>
	                   <ul>
	                          <li><a href="#">sous 1</a></li>
			<li><a href="#">sous 2</a></li>
			<li><a href="#">sous 3</a></li>
			<li><a href="#">sous 4</a></li>
			<li><a href="#">sous 5</a></li>
			<li><a href="#">sous 6</a></li>
		       </ul>
	      </li>
	      <li>
	             <a href="#">rub2</a>
		        <ul>
			 <li><a href="#">sous 1</a></li>
			 <li><a href="#">sous 1</a></li>
			 <li><a href="#">sous 1</a></li>
			 <li><a href="#">sous 1</a></li>
		         </ul>
	        </li>
	        <li>
		 <a href="#">rub3</a>
		         <ul>
			  <li><a href="#">sous 1</a></li>
			  <li><a href="#">sous 1</a></li>
			  <li><a href="#">sous 1</a></li>
			  <li><a href="#">sous 1</a></li>
		          </ul>
	         </li>
	         <li>
		  <a href="#">rub4</a>
		          <ul>
			   <li><a href="#">sous 1</a></li>
			   <li><a href="#">sous 1</a></li>
			   <li><a href="#">sous 1</a></li>
			   <li><a href="#">sous 1</a></li>
		           </ul>
	          </li>
            </ul> <!-- menu -->	
			
            <!-- fin menu horizontale -->
		
      </div> <!-- header -->
</div>

</body>



et le css:


div#header
{

	width: 1000px;
	height: 228px;
	margin: 0px;
	margin-bottom: 15px;
	padding: 0px;
	border: 1px solid blue;  (avec la bordure sa marche, sans sa marche plus...)
	background-image: url("img.png");
	
}

#nav , #nav ul{
	
	margin: 0px;
	margin-left: 495px;
	margin-top:190px;
	padding: 0px;
	
	/*background-color: green;*/
	list-style : none;
	
}
#nav li{   /* 1er niveau */
margin:0px;
	margin-right: 20px;
	float:left;
	
	/*background-color: red;*/
}

#nav  li ul  {   /*2eme niveau */
	position:absolute;
	margin:0px;
	margin-left:0px;
	padding:0px;
	/*padding:4px;*/
	padding-right:20px;
	width:117px;  /* 177 px max dans ce cas */
	background-color: white;
	/*text-align:center;*/
	
	left: -999em;
}

#nav li a:hover{
	color:red;
}

#nav li:hover ul{    /*1er niveau du menu*/
	/*color:red;*/
	left:auto;
	 min-height: 0; 
}

#nav  li ul a:hover {  /* 2eme niveau */
	color:yellow;
}


Voila, j'espere que certain d'entre vous pourrons m'aider Smiley smile car la je ne comprend pas du tout....
Bonjour,

Le plus simple dans le cas présent, c'est de positionner le menu (en absolue) en prenant comme référence le header :
div#header {
 position: relative;
	width: 1000px;
	height: 228px;
	margin-bottom: 15px;
	background: purple;
}

#nav, #nav ul{
	margin: 0;
	padding: 0;
	list-style : none;
}

#nav {
 position: absolute; 
 top : 190px; 
 left: 495px;
}

#nav li{   /* 1er niveau */
	float: left;
    margin-right: 20px;
}


#nav ul {   /*2eme niveau */
	position:absolute;
	padding-right:20px;
	width:117px;
	background-color: white;
	left: -999em;
}

#nav li a:hover{
	color:red;
}

#nav li:hover ul{    /*1er niveau du menu*/
	left:auto;
	 min-height: 0; 
}

#nav  li ul a:hover {  /* 2eme niveau */
	color:yellow;
}
Sujet clos
Aller à