Meny i IE

Hejsan skulle kunna behöva hjälp. Kan inte få min meny att fungera i ie men i firefox, de ständig dilemat. Hovern funka inte...

Html-koden ser ut så här

<ul id="meny">
  <li id="val1"><a href="#">Meny 1</a></li>
  <li id="val2"><a href="#">Meny 2</a></li>
  <li id="val3"><a href="#">Meny 3</a></li>
  <li id="val4"><a href="#">Meny 4</a></li>
  <li id="val5"><a href="#">Meny 5</a></li>
</ul>

Och Css-koden

#meny {
	list-style-type: none;
	margin: 0px;
	text-transform:uppercase;
	}
#meny li {
	list-style-type: none;
	margin-right: 1px;
	margin-left: 1px;
	padding-top: 4px;
	background-color: #FFFFFF;
	height: 20px;
	display:block;
	float: left;
	text-align: center;
	font-family:"Lucida Grande", Arial, sans-serif;
	font-size:11px;
	
}
a {
text-decoration:none;
}
#val1 {
	border-top: 6px solid #870000;
	width: 100px;
}
#val1:hover {
	background:#E7CCCC;
}
#val2 {
	border-top: 6px solid #7E9E67;
	width: 100px;
}
#val2:hover {
	background-color:#ACAABC;
}
#val3 {
	border-top: 6px solid #6699CC;
	width: 200px;
}
#val3:hover {
	background-color:#99CCFF;
}
#val4 {
	border-top: 6px solid #CCCC66;
	width: 100px;
}
#val4:hover {
	background-color:#99CCFF;
}
#val5 {
	border-top: 6px solid #666;
	width: 100px;
}
#val5:hover {
	background-color:#99CCFF;
}

Det jätteenkla svaret är väl att IE inte stöder hover på annat än <a>-taggen! Är nog ändrat i IE7 men jag är inte säker.

Jo det funkar i IE7, har nån något bra tips på hur man kanske skulle kunna bygga om menyn så de funkar som den är menad att göra.

Byt ut din CSS.

#meny {
	list-style-type: none;
	margin: 0px;
	text-transform:uppercase;
	}
#meny li, #meny li a {
	list-style-type: none;
	margin-right: 1px;
	margin-left: 1px;
	padding-top: 4px;
	background-color: #FFFFFF;
	height: 20px;
	display:block;
	float: left;
	text-align: center;
	font-family:"Lucida Grande", Arial, sans-serif;
	font-size:11px;
	
}
a {
text-decoration:none;
}
#val1 a {
	border-top: 6px solid #870000;
	width: 100px;
}
#val1 a:hover {
	background:#E7CCCC;
}
#val2 a {
	border-top: 6px solid #7E9E67;
	width: 100px;
}
#val2 a:hover {
	background-color:#ACAABC;
}
#val3 a {
	border-top: 6px solid #6699CC;
	width: 200px;
}
#val3 a:hover {
	background-color:#99CCFF;
}
#val4 a {
	border-top: 6px solid #CCCC66;
	width: 100px;
}
#val4 a:hover {
	background-color:#99CCFF;
}
#val5 a {
	border-top: 6px solid #666;
	width: 100px;
}
#val5 a:hover {
	background-color:#99CCFF;
}

tack, blir blind efter ett tag. under tiden valde jag en annan väg och bygde om lite. Men igen körde jag fast i IE; IE hänger sig.

<ul id="menu">
  <li id="menu-start"><a href="#"><i>Start</i></a></li>
  <li id="menu-historik"><a href="#"><i>Historik</i></a></li>
  <li id="menu-kontor"><a href="#"><i>Kontorsgemenskap</i></a></li>
  <li id="menu-foretag"><a href="#"><i>F&ouml;retag</i></a></li>
  <li id="menu-kontakt"><a href="#"><i>Kontakt</i></a></li>
</ul>

och css

#menu {
	margin:0;
	padding:0;
	position: absolute;
	list-style-type:none;
	width: 610px;
}
#menu li {
	display: inline;
	list-style-type: none;
	text-transform: uppercase;
}
#menu a {
	background-image: url(images/nav.png);
	background-repeat: no-repeat;
	display:block;
	float: left;
	height:30px;
	width:100px;
	text-align: center;
	text-decoration: none;
	margin-right: 2px;
	background-position: center 0px;
}
#menu i {
	display: none;
}
#menu #menu-start a:hover {
	background-position: center -30px;
}
#menu #menu-historik a {
	background-position: center -60px;
}
#menu #menu-historik a:hover {
	background-position: center -90px;
}
#menu #menu-kontor a {
	width: 202px;
	background-position: center -120px;
}
#menu #menu-kontor a:hover {
	background-position: center -150px;
}
#menu #menu-foretag a {
	background-position: center -180px;
}
#menu #menu-foretag a:hover {
	background-position: center -210px;
}
#menu #menu-kontakt a {
	background-position: center -240px;
	margin-right: 0px;
}
#menu #menu-kontakt a:hover {
	background-position: center -270px;
	margin-right: 0px;
}

För en otroligt bra inspirationssajt bör du spana in http://css.maxdesign.com.au/

/Jonas