Legegyszerűbb css ff/chrome/msie legördülő menü hogyan?

Internet: PHP, CGI, stb.

Sziasztok,

egy kis privát, de (nekem nyilván) létfontos oldalra kellene nekem sürgősen egy
CSS ff/chrome/msie-képes legyegyszerűbb legördülő menü.

Amim van, az a msie8 nem eszi, 10 éve hegesztettem utoljára ilyen nagy trükökkel nn4 alatt js-sel,
most foglamam sincs a msie-ről és hogy miről van lemaradva, de mivel nem lelem hirtelen, tudnátok nekem küldeni egy linket, hogy

hol találom a legyegyszerűbb CSS ff/chrome/msie-képes legördülő menüt!?

Előre is NAGYON THX! sas

  • 2667 megtekintés

( violapeter v | 2012. 04. 03., k – 14:51 )

Ilyesmire gondoltál?

HTML: 


  <ul>
    <li><a href="#">Főmenü1</a>
      <ul>
        <li><a href="#">Almenü1</a></li>
        <li><a href="#">Almenü2</a></li>
        <li><a href="#">Almenü3</a></li>
        <li><a href="#">Almenü4</a></li>
      </ul>
    </li>
    <li><a href="#">Főmenü2</a></li>
    <li><a href="#">Főmenü3</a>
      <ul>
        <li><a href="#">Almenü1</a></li>
	<li><a href="#">Almenü2</a></li>
      </ul>
    </li>
    <li><a href="#">Főmenü4</a></li>
  </ul>

CSS: 


#menu ul { /* A fő menü */
	position: absolute;
}
#menu ul li { /* A fő menü menüpontja */
	width:50px;
	margin-left:20px;
	float:left;
	list-style-type:none;
}
#menu ul li ul { /* Az almenük */
	margin-left:-60px;
}
#menu ul li ul li { /* Az almenük menüpontjai */
	display:none;
	position:relative;
	float:none;
}
#menu ul li:hover ul li { /* Az almenük megjelenéséért felelős */
	display:block;
}

kösz, most itt tartok, ez már működni látszik, finomítanom kell már csak 1 kicsit :) 



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> menü </title>

<style type="text/css">

a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}

#nav {background:#09c; height:28px; font:normal 12px/28px arial, verdana, sans-serif; width:720px; margin:0 auto;

position:relative;}
#nav ul {margin:0; padding:0; list-style:none;}
#nav ul.menu {position:absolute; overflow:hidden;}
#nav .menu .level1-li {float:left; width:120px; margin-top:-300px;}
#nav .menu a {display:block; width:120px; text-decoration:none; text-align:center; color:#fff;}
#nav .menu a.level1-a {position:relative; float:left; margin-right:-119px; margin-top:300px;}
#nav .menu .sub {background:#069; float:left; margin-top:-28px; padding-top:28px;}
#nav .menu .sub a {background:#c90; position:relative; margin-right:-1px;}
#nav .menu a:hover,
#nav .menu a:focus,
#nav .menu a:active {background:#069; margin-right:0;} 



</style>

</head>

<body>

	<div id="nav">
		<ul class="menu">
			<li class="level1-li"><a class="level1-a" href="#url">Products</a>
				<ul class="sub">
					<li><a href="#url">Digital Cameras</a></li>
					<li><a href="#url">Tripods</a></li>
				</ul>
			</li>
			<li class="level1-li"><a class="level1-a" href="#">Services</a>
				<ul class="sub">
					<li><a href="#url">Enlarging</a></li>
					<li><a href="#url">Framing</a></li>

				</ul>
		</ul>
	</div>
</body></html>

Szervác Attila - http://321.hu/sas