Több szintű CSS lista menü IE-ben nem csukódik be

Anonymous · 2005. Okt. 25. (K), 17.11

Helló!

Összetákoltam egy több szintű CSS menüt, de sajnos (IE-ben) nem tökéletes.

A kód:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>CSS menü</title>
	
	<style type="text/css">
	
	body
	{
  		behavior: url(csshover.htc);
	}
	
	#menu a
	{
		display: block;
		background: gray;
		font-family: arial;
		text-decoration: none;
		font-size: 12px;
		color: black;
		height: 30px;
	}
	
	#menu a:hover
	{
		background: white;
		color: black;
	}
	
	#menu ul ul
	{
		display: none;
	}
	
	#menu ul li:hover ul
	{
		display: block;
	}
	
	
	#menu ul
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#menu ul li
	{
		float: left;
		width: 70px;
	}
	
	#menu ul ul ul li
	{
		position: relative;
		left: 100%;
		top: -30px;
		display: none;
	}
	
	#menu ul li ul li:hover ul li
	{
		display: block;
	}
		
	</style>
	
</head>

<body>

<div id="menu">
<ul>
	<li>főmenü1
		<ul>
			<li><a href="">egy</a></li>
			<li><a href="">kettő</a></li>
			<li><a href="">három</a>
			
				<ul>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
				</ul>
			</li>
		</ul>
	</li>
	
	<li>főmenü2
		<ul>
			<li><a href="">egy</a></li>
			<li><a href="">kettő</a></li>
			<li><a href="">három</a></li>
		</ul>
	</li>

</ul>
</div>

</body>
</html>

Ha IE-ben ha lenyitom "három" almenü pontjából nyíló almenüt és leviszem az egeret a "három" almenü pont alá, akkor nem csukódik be a menü.

Néztem mások által megvalósított CSS menüt, de valahogy mindenki máshogy csinálja.

■

HTML, CSS, JavaScript, Ajax

csirip

Pontosítok

Anonymous · 2005. Okt. 25. (K), 17.16

Firefoxban is ugyanez a jelenség.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Megoldva

Anonymous · 2005. Okt. 25. (K), 17.28

Így már jó:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>CSS menü</title>
	
	<style type="text/css">
	
	body
	{
  		behavior: url(csshover.htc);
	}
	
	#menu a
	{
		display: block;
		background: gray;
		font-family: arial;
		text-decoration: none;
		font-size: 12px;
		color: black;
		height: 30px;
	}
	
	#menu a:hover
	{
		background: white;
		color: black;
	}
	
	#menu ul ul
	{
		display: none;
	}
	

	#menu ul ul ul
	{
		position: absolute;
	}

	
	#menu ul li:hover ul
	{
		display: block;
	}
	
	
	#menu ul
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#menu ul li
	{
		float: left;
		width: 70px;
	}
	
	#menu ul ul ul li
	{
		position: relative;
		left: 100%;
		top: -30px;
		display: none;
	}
	
	#menu ul li ul li:hover ul li
	{
		display: block;
	}
		
	</style>
	
</head>

<body>

<div id="menu">
<ul>
	<li>főmenü1
		<ul>
			<li><a href="">egy</a></li>
			<li><a href="">kettő</a></li>
			<li><a href="">három</a>
			
				<ul>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
				</ul>
				
			</li>
		</ul>
	</li>
	
	<li>főmenü2
		<ul>
			<li><a href="">egy</a></li>
			<li><a href="">kettő</a></li>
			<li><a href="">három</a></li>
			<li><a href="">egy</a>
			
				<ul>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
				</ul>
			
			</li>
			<li><a href="">kettő</a></li>
			<li><a href="">három</a></li>
			<li><a href="">egy</a></li>
			<li><a href="">kettő</a></li>
			<li><a href="">három</a></li>
		</ul>
	</li>

</ul>
</div>

</body>
</html>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Sajnos mégsem jó...

Anonymous · 2005. Okt. 25. (K), 21.13

Eddig jutottam:

http://cssmenu.uw.hu/

Látható, ha a "főmenü2"-nél lenyílik az almenü, majd a legfelső almenüponthoz tartozó almenüt, akkor a mellette lévő almenü egy rész nem reagál semmire firefoxban, IE-ben pedig csak akkor, ha ha közvetlenül a linkre kerül a kurzor.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>CSS menü</title>
	
	<style type="text/css">
	
	body
	{
  		behavior: url(csshover.htc);
		background: #ff9900;
	}
	
	#menu
	{
		position: absolute;
	}
	
	#menu a
	{
		display: block;
		background: gray;
		font-family: arial;
		text-decoration: none;
		font-size: 12px;
		color: black;
		height: 30px;
	}
	
	#menu a:hover
	{
		background: white;
		color: black;
	}
	
	#menu ul ul
	{
		display: none;
	}
	
	#menu ul ul ul 
	{
		position: absolute;
		width: 70px;
	}
	
	#menu ul li:hover ul
	{
		display: block;
	}
	
	
	#menu ul
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#menu ul li
	{
		float: left;
		width: 70px;
	}
	
	#menu ul ul ul li
	{
		position: relative;
		left: 100%;
		top: -30px;
		display: none;
	}
	
	#menu ul li ul li:hover ul li
	{
		display: block;
	}
		
	</style>
	
</head>

<body>

<div id="menu">
<ul>
	<li>főmenü1
		<ul>
			<li><a href="">egy</a></li>
			<li><a href="">kettő</a></li>
			<li><a href="">három</a>
			
				<ul>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
				</ul>
				
			</li>
		</ul>
	</li>
	
	<li>főmenü2
		<ul>
			<li><a href="">egy</a>
			
				<ul>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
				</ul>
			
			</li>
			<li><a href="">kettő</a></li>
			<li><a href="">három</a></li>
			<li><a href="">négy</a>
			
				<ul>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
					<li><a href="">zöld</a></li>
					<li><a href="">piros</a></li>
				</ul>
			
			</li>
			<li><a href="">öt</a></li>
			<li><a href="">hat</a></li>
			<li><a href="">hét</a></li>
			<li><a href="">nyolc</a></li>
			<li><a href="">kilenc</a></li>
		</ul>
	</li>

</ul>
</div>
<br><br>dfdsfdsfsdfsdf

</body>
</html>

Örülnék ha valaki tudna segíteni, mert már nekem nincs ötletem.

Köszönöm előre is!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Próbáld meg így...

nAgYu · 2005. Okt. 27. (Cs), 10.41

... mert nálam ez működik IE és FF alatt is (mással még nem próbáltam...)
A kódból csak a <head>...</head> szakaszt másolom ide, a többi úgyis ugyanaz.


...
<head>
<title>CSS menü</title>
    
<style type="text/css">
	    
*
{
  margin: 0;
  padding: 0;
}

body
{
  background-color: #ff9900;
  color: black;
  position: relative;
}

#menu
{
  position: absolute;
  top: 10px;
  left: 10px;
}

#menu ul
{
  list-style-type: none;
}

#menu ul li
{
  float: left;
  width: 70px;
}

#menu ul li ul li
{
  float: none;
  position: relative;
}
	
#menu a, #menu a:link, #menu a:visited, #menu a:active
{
  font-family: arial, helvetica, sans-serif;
  text-decoration: none;
  font-size: 12px;
  line-height:28px;
  height: 30px;
  vertical-align: middle;
  display: block;
  background-color: gray;
  color: black;
}	

#menu a:hover
{
  background-color: white;
}

#menu ul li ul, #menu ul li ul li ul, #menu ul li:hover ul li ul
{
  display: none;
}

#menu ul li:hover ul
{
  display: block;
}

#menu ul li ul li:hover ul
{
  display: block;
  position: absolute;
  top: 0;
  left: 70px;
}

</style>

<!--[if lt IE 7]>

  <script src="ie7-standard-p.js" type="text/javascript">
  </script>

<style type="text/css">

  #menu ul li ul li:hover
  {
    margin-bottom: -4px;
  }

</style>

<![endif]-->    

</head>
...

Egy apró változás: én személy szerint Dean Edwards IE7 "csomagját" használom, ez az "ie7-standard-p.js" a forrásban. Egy nagy hátránya van, mint az a kiterjesztéséből is látszik: ha nincs JS, nincs menü sem...

Üdv.:
nAgYu

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés