Menu déroulant dynamique

Bonjour à tous !
Infographiste actuellemet au chômage je cherche à me former au CSS. Grâce à votre site, forum et bouquins cités j'ai pu faire de gros progrès même si pour l'instant certaines applications restent encore floues.


Dernièrement je me suis intéressée au menu dynamique vertical. J'ai intégré ce menu sans aucun soucis. Là ou je bloque c'est d'essayer d'integrer un list-style-type: circle; ou un list-style-img ( http://gaellac.free.fr/test_CSS/point.gif ) pour mettre des petits ronds à chaque menu et sous-menu . Du coup j'ai testé la chose en integrant partout dans le code le list-style-type: circle; sans aucun résultat probant. Je m'efforce donc de résoudre mon problème mais si vous avez des suggestions surtout n'hesitez pas, j'avoue que je nage un peu

Merci pour votre aide.

Voici don mon code CSS :

body {
margin: 0;
padding: 0;
font-family: Thaoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
list-style-type: circle;
}
dl, dt, dd, ul, li {
margin: 0px;
padding: 0px;
list-style-type: disc;
}
#menu {
position: absolute;
top: 10px;
left: 10px;
list-style-type: circle;
}
dl#menu {
width: 12em;
list-style-type: circle;
}
dl#menu dt {
cursor: pointer;
width: 80px;
text-align: left;
font-weight: bold;
background: #ccc;
list-style-type: circle;
}
dl#menu dd {
text-align: left;
list-style-type: circle;
}
dl#menu li {
text-align: left;
background: orange;
list-style-type: circle;
}
dl#menu li a, dl#menu dt a {
color: black;
text-decoration: none;
list-style-type: circle;
display: block;
border: 0 none;
height: 50%;
list-style-type: circle;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: yellow;
list-style-type: circle;
}

Bonjour,

J'arrive tant bien que mal à placer des puces (images) uniquement dans le sous-menu. Exemple

Par contre je n'arrive tjs pas à placer ces puces devant les titres des menus principaux et je constate par ailleurs que mon point.gif est décalé.

CSS :

dl, dt, dd,  ul, li, {
list-style-image: url(point.gif);
}

#menu {
position: relative; 
left:20px;
font-family: Thaoma, Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px;
color:#0099ff;
text-decoration: none;
}

#menu dt {
cursor: pointer;
margin: 0 0;;
height: 10px;
line-height: 10px;
text-align: left;
}

#menu dd {
text-align: left;
color:#666666;
text-decoration: none;
}

dl#menu {
width: 17em;
}

#menu li {
position:relative;
text-align: left;
left:-60px;
color:#0099ff;
text-decoration: none;
}

#menu li a, #menu dt a {
position:relative;
text-align: left;
color:#666666;
text-decoration: none;
display: block;
height: 100%;
vertical-align : 0;
}

#menu li a:hover, #menu dt a:hover {
text-decoration: none;
color:#0099ff;
}

Merci pour votre aide