Webbdesign.info

killroy10 · Nykomling Blev medlem: 23 September 2009 Inlägg: 1

Jag är ny på detta och har lite problem med en navigation där jag skall ha en drop-down funktion. Allt stylat i css.
Problemet jag har är att texten skall skall vara vit i hela tiden i drop-down menyn, samt att texten i den översta menyn skall vara vit så länge den undermenyn är aktiv.

Bifogar kod.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naviering test</title>




<style type="text/css">
body {
font-size:100%;
behavior:url(file:///Macintosh%20HD/Users/pelleandersson/Desktop/Stila_filer_alla_kapitel%20Folder/Kapitel%207/css/csshover.htc);
font-family: Arial, Helvetica, sans-serif;
}
* {margin:0; padding:0;}

/* den vågräta menyn börjar här */
div#listmenu {
width:100%; /* ger div-elementet full bredd */
float:left; /* gör att div-elementet omsluter listan */
font-size:.8em; /* ger div-elementet färg */
margin-top:20px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra
det här exemplet tydligare */
}
div#listmenu ul {
margin:0 0 0 300px;/* drar in ul från behållarens kant */
}
div#listmenu li {
float:left; /* får listan att justeras vågrätt i stället för lodrätt */
position:relative; /* positioneringskontext för den absolut positionerade listmenyn */
list-style-type:none; /* tar bort punkterna för varje listpost */
}
div#listmenu li:first-child {
}
div#listmenu li:hover {
background-color:#000; /* anger bakgrunden för menyalternativen */
}
div#listmenu a {
color:#000;
padding:0 10px; /* skapar luft på varje sida om menyalternativen */
text-decoration:none; /* tar bort understrykningen av länken */
}
div#listmenu a:hover {
color:#FFF;
}
/* den vågräta menyn slutar här */

/* listmenyn börjar här */
div#listmenu ul li ul {
margin:0; /* förhindrar att det tillfälliga värdet från den vågräta menyn ärvs här - OK att ta bort om du tar bort
det tillfälliga värdet ovan */
position:absolute; /* positionerar listmenyn ul i förhållande till dess relativt positionerade li-förälder */
width:12.5em; /* anger menyns bredd – i kombination med bredden 100 % för li-elementet gör detta att menyn
justeras lodrätt */
left:0px; /* justerar listmenyn exakt under den vågräta menyn */
background-color:#000;
}
div#listmenu ul li ul li {
width:100%; /* gör att listposterna fyller ut listbehållaren (ul) */
}
div#listmenu ul li ul li:first-child {
}
/* gör så att listmenyn visas när användaren pekar på den vågräta menyn */
div#listmenu ul li ul {display:none;} /* döljer listmenyn när användaren inte pekar på menyn */
div#listmenu ul li:hover ul {display:block;} /* visar listmenyn när användaren
pekar på menyn */
/* listmenyn slutar här */

/* HACK-ZON - */
/* hack för IE (alla modeller) så att menyn får en vågrät linje längst ut till vänster */
* html div#listmenu ul {
float:left; /* får ul att omsluta alla li-elementen */
border-left:1px solid #000; /* lägger till linjen längst ut till vänster i ul-elementet */
margin-left:15px; /* IE fördubblar värdet som angivits - varför? */
}
* html a {display:block;} /* får IE5 & 5.5 att acceptera padding för länken */
/* slut på hack-zon */
/* SLUT PÅ LISTBASERAD MENY */
</style></head>

<body>
<div id="listmenu" class="clearfix">
<ul>
<li><a href="#">Erbjudande</a></li>
<li><a href="#">Tjänster</a>
<ul>
<li><a href="#">Högtrycksspolning</a></li>
<li><a href="#">TV-inspektion av avlopp</a></li>
<li><a href="#">Relining</a></li>
<li><a href="#">Avloppsrensning</a></li>
<li><a href="#">Slamsugning</a></li>
<li><a href="#">Sanering</a></li>
<li><a href="#">Avfallshantering</a></li>
<li><a href="#">Miljötekniska frågor</a></li>
<li><a href="#">Fastighetsbesiktning</a></li>
</ul>
</li>
<li><a href="#">Om oss</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Företagskunder</a></li>
</ul>
</div>
</body>
</html>