Halloj där
Försöker göra en dropdown-meny med en lista. Grunden är en suckerfish-meny som jag tänkte anpassa. Har ingen url utan måste tyvärr posta koden här.
Problemen är;
- a-taggen täcker inte hela <li> i IE trots display: block och width 100%.
- Får inte hover att fungera på <li>, Skulle kunna tänka mig att byta bakgrunden på <a> i stället om det var så att <a> gick ända ut i kanterna på <li>
Nåväl, det är säkert andra saker jag grubblar på men det här är det då mina första och största problem
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Meny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#menu {
width: 750px;
position: absolute;
left: 50%;
margin-left: -375px;
border: 1px solid gray;
background: #508fc4;
font-family: verdana, arial, helvetica, sans-serif;
}
.top {
font-weight: bold; /* Sätter stylen för den översta raden i menyn */
padding: 2px 5px;
}
.under {
font-weight: normal; /* Sätter stylen för undermenyerna */
padding: 5px;
border-bottom: 1 px solid black;
background: #2175bc;
}
#nav a {
display: block;
height: 100%;
width: 7.5em;
text-decoration: none;
color: white;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.75em;
font-weight: noinherit;
}
#nav a:hover {
color: red;
background: black;
}
html>body #nav li a {
width: auto;
height: auto;
}
#nav {
float: left;
position: relative;
top: 0;
}
#nav li, #nav ul{
float: left;
width: 8em;
}
ul {
list-style: none;
}
#nav li ul { /* second level lists */
position: absolute;
width: 8em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
margin-left: -5px;
background: black;
}
#nav li:hover, #nav li:sfhover {
background: black;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="menu">
<ul id="nav"">
<li class="top" style="width: 5em; border: 1px solid black;""><a href="#" style="border: 1px solid yellow;">START</a></li>
<li class="top" style="border: 1px solid black;"><a href="#" style="border: 1px solid yellow;">MENYALT. 1</a>
<ul>
<li class="under"><a href="#">Undermeny</a></li>
<li class="under"><a href="#">Undermeny</a></li>
<li class="under"><a href="#">Undermeny</a></li>
<li class="under"><a href="#">Undermeny</a></li>
<li class="under"><a href="#">Undermeny</a></li>
<li class="under"><a href="#">Undermeny</a></li>
</ul>
</li>
<li class="top" style="border: 1px solid black;"><a href="#" style="border: 1px solid yellow;">MENYALT. 2</a>
<ul>
<li class="under"><a href="#">Undermeny</a></li>
<li class="under"><a href="#">Undermeny</a></li>
</ul>
</li>
<li class="top" style="border: 1px solid black;"><a href="#" style="border: 1px solid yellow;">MENYALT. 3</a>
<ul>
<li class="under"><a href="#">Undermeny</a></li>
<li class="under"><a href="#">Undermeny</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Snälla, bry er inte om färger och borders, det är bara till för min felsökning :-)
M.v.h Mikael