CSS-meny krånglar
Hej
Prio 1
När jag försöker ändra min CSS-meny från vanlig till en med undermeny går det inte som jag vill. Jag har fixat fram så att undermenyn syns när jag hovrar över respektive ord i huvudmeny. Det som däremot jag ej kan få bukt på är att jag inte kan klicka på undermeny efter som att den försvinner när man försöker föra muspekare dit.
Prio 2
Jo en annan sak jag inte heller vet hur jag ska lösa är hur jag ska få varje enskild undermeny att ligga centrerad med respektive ord i huvudmenyn.
Sub 2 ska ligga centrerad under nyheter, sub 3 centrerad under auktioner osv.
Vill/behöver du se hur sidan ser ut just nu kan jag länka i PM.
HTML
<body>
<div id="page-wrap">
<ul id="nav">
<li class="current"><a href="#">HEM</a>
<ul>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub1</a></li>
</ul>
</li>
<li><a href="#">NYHETER</a>
<ul>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub2</a></li>
</ul>
</li>
<li><a href="#">AUKTIONER</a>
<ul>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub3</a></li>
</ul>
</li>
<li><a href="#">VILLKOR</a>
<ul>
<li><a href="#">Sub4</a></li>
<li><a href="#">Sub4</a></li>
<li><a href="#">Sub4</a></li>
</ul>
</li>
<li><a href="#">OM</a>
<ul>
<li><a href="#">Sub5</a></li>
<li><a href="#">Sub5</a></li>
<li><a href="#">Sub5</a></li>
</Ul>
</li>
<li><a href="#">Kontakt</a>
<ul>
<li><a href="#">Sub6</a></li>
<li><a href="#">Sub6</a></li>
<li><a href="#">Sub6</a></li>
</li>
</ul>
<div id="Widget">
</div>
</ul>
<object width="980" height="120" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://kampanj.tradera.com/widget/20100702/widget.swf"/>
<param name="flashvars" value="backgroundColor=%239b00ff&foregroundColor=%23ffffff&sellerIDs=2176828"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://kampanj.tradera.com/widget/20100702/widget.swf" width="980" height="120">
<param name="flashvars" value="backgroundColor=%239b00ff&foregroundColor=%23ffffff&sellerIDs=2176828"/>
<!--<![endif]-->
<p><a href="http://www.tradera.com/category/category.aspx?ftgnr=2176828">Auktioner på Tradera</a></p>
<p><a href="http://widget.tradera.com/">Skapa din egen Tradera-widget</a></p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<div id="Widget">
CSS
[pre]width:980px;
ma div#page-wrap {
rgin0: auto;
}
#nav {
list-style:none;
height: 75px;
width:980px;
position:relative;
line-height:1.4em;
}
#nav li {
height: 15px;
width: 100px;
float:left;
font-size: 1.4em;
text-align:center;
padding: center;
}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
background:
margin-top: 110px;
margin-bottom: 15px;
color: black;
padding-top: 2px;
font-weight: bold;
position: center;
background:green;
}
#nav a:active, #nav a:focus, #nav a:hover {
color: red;
background:#deeef2;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0px;
}
#nav ul {
display: none;
position:center;
left: 0em;
height:0px;
width:980px;
list-style:none;
padding:center;
margin-right: 100px;
padding-top:-100px;
}
#nav li:hover > ul {
display:inline;
position: absolute;
width:auto;
margin: 0px;
}
#nav ul a {
font-size:60%;
width: 100px;
height:0px;
padding:10px;
margin:-10px;
background: green;
}
#nav li:active ul, #nav li:hover ul {
color:red;
left:0;
}
div#widget {
width: 980px;
height: 12px;
