CSS bestand voor 1 bepaalde div

[Franks]

Hallo mensen,

Ik zit met een probleempje...
Ik ben met een site bezig waarin ik dmv javascript een dropdown menu heb ingevoegd.
Dit menu staat in de HTML weggeschreven als een list.

Nu gebruik ik ook een list om iets op te sommen verder op de pagina.
Deze list had ik al bepaalde eigenschappen mee gegeven in de CSS.
Toch wil ik deze eigenschappen niet in de LIST van het dropdown menu hebben.

Misschien is de oplossing wel heel simpel, maar ik kom er even niet meer uit.

- Ik zat er aan te denken om de DIV waar het menu in staat te linken aan een andere CSS file. Weet niet of dit mogelijk is? dus 2 CSS bestanden gebruiken.

- 2e optie die ik had bedacht om de LIST van dropdown menu een CLASS mee te geven, dit werkt vervolgens niet lekker... (of ik doe iets verkeerd)

Kan iemand mij hierbij helpen, want ik kom er echt niet meer uit...
Alvast bedankt!

[Lorrens]

ul li {
color: red;
}

ul.dropdown li {
color: blue;
}en dan nu de html :
<ul>
<li>deze is rood</li>
</ul>

<ul class="dropdown">
<li>deze is blauw</li>
</ul>

Zo kan het toch gewoon? standaard zijn ze dan rood... en als ze in de class dropdown zitten zijn ze blauw.

[Franks]

Dit werkt dus niet... De Class wordt dan niet goed gelezen...
Ik zal de code even bijvoegen... Misschien schept dat wat duidelijkheid:

HTML - dropdown code:
<div>
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">HOME</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> </dd>
</dl>

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">ALGEMEEN</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> </dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">TEAMS</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul class="dropdown">
<li><a href="#" class="underline">Mini's Meisjes</a></li>
<li><a href="#" class="underline">Mini's Jongens</a></li>
<li><a href="#" class="underline">D1</a></li>
<li><a href="#" class="underline">C3</a></li>
<li><a href="#" class="underline">C2</a></li>
<li><a href="#" class="underline">C1</a></li>
<li><a href="#" class="underline">B1</a></li>
<li><a href="#" class="underline">A2</a></li>
<li><a href="#" class="underline">DS3</a></li>
<li><a href="#" class="underline">DS2</a></li>
<li><a href="#" class="underline">DS1</a></li>
<li><a href="#" class="underline">HS1</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">SPONSOREN</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> </dd>
</dl>

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">CONTACT</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> </dd>
</dl>

<div id="right">
<img src="images/right.jpg" />
</div>
<div style="clear:both" />
</div>
</div>

CSS:
li {
text-align: left;
font-size: 12px;
font: Calibri;
margin: 5px;
margin-left: 15px;
margin-right: 14px;
list-style: decimal;
}

/** DROPDOWN MENU **/

body {
font: 15px Calibri;
width: 100%;
}

#javamenu {
width: 980px;
padding-left:25px;
}


#menu {
background:url(images/bg.jpg);
}


.dropdown {
float:left;
margin-left:10px;
}

.dropdown dt {
width: 100px;
padding:8px;
font-weight:bold;
cursor:pointer;
color: #FFFFFF;
background:url(images/bg.jpg);
text-align: center;
}

.dropdown dt:hover {
color: #FFF;
}


.dropdown dd {
position:absolute;
overflow:hidden;
width:150px;
display:none;
z-index:150;
color: #FFFFFF;
background: #999999;
}

ul .dropdown ul {
width:150px;
border:1px solid #333333;
list-style:none;
border-top:none;
background-image: transparant url(images/right.jpg) no-repeat scroll right bottom;
}


li .dropdown li {
display:inline;
}

.dropdown a, .dropdown a:active, .dropdown a:visited {
display:block;
padding:5px;
color: #FFFFFF;
text-decoration:none;
width:150px
}

.dropdown a:hover {
background:#d9e1e4;
color:#000}

.dropdown .underline {
border-bottom:1px solid #666666;
}

#left {
float: left;
background-image: url(images/left.jpg) no repeat;
}

#right {
float: right;
background-image: url(images/right.jpg) no repeat;
}

[Lorrens]

ul .dropdown ul en li .dropdown li kloppen niet.
Wat je hier zegt is: (de eerste)
Unordered list, met hierin een ongedefinieerd element met de class dropdown, die weer een unordered list bevat.
vb: <ul><li class="dropdown"><ul><li>tekst</li></ul></li></ul>
De tweede betekent dit:
Een list-item, die een ongedefinieerd element bevat met de class dropdown, die weer een list-item bevat.
vb <li><span class="dropdown"><li>span is een voorbeeld element</li></span></li>

Anders gezegd, je roept de verkeerde dingen aan ;)
als je de list-items in de unordered list van dropdown wil aanspreken, heb je gewoon dit pad nodig:
ul.dropdown li { style: here; }

zelfde geldt voor die andere:
dl.dropdown dt, dl.dropdown dd { style: here; }

Ik hoop dat het duidelijk is, succes! :D

[Franks]

Ik zal er is mee gaan stoeien...
Denk dat ik er zo wel moet uit komen.
Alvast hartelijk dank voor de hulp (F) :)