Hallo,
ich habe eine Navigation die aus eine ungeordnete verschachtelte Liste besteht. Beispiel:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Navigation</title>
<style type="text/css">
body {
color: #000;
background: #FFF;
font-family: arial,sans-serif;
font-size: 100.01%;
padding: 0;
margin: 0;
}
#sidebar {
float: left;
width: 210px;
margin: 15px 0 0 30px;
padding: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
width: 205px;
color: #00F;
font-weight: bolder;
padding: 0;
margin-left: 5px;
margin-top: 3px;
margin-bottom: 0;
float: left;
border-bottom: 1px dotted #ccc; /* fuer die Linie */
}
#sidebar ul li ul li {
width: 180px;
list-style-type: none;
line-height: 200%;
font-weight: lighter;
font-size: 86%;
color: #36C;
padding-left: 10px;
padding-right: 0;
margin-left: 15px;
margin-right: 0;
}
#sidebar ul li ul li ul li {
width: 160px;
color: #000080;
list-style: none;
line-height: 170%;
margin-left: 13px;
margin-top: 0;
margin-right: 0;
padding-left: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li>Punkt 1</li>
<li>Punkt 2
<ul>
<li>Punkt 2-1</li>
<li>Punkt 2-2
<ul>
<li>Punkt 2-2-1</li>
<li>Punkt 2-3-2</li>
</ul>
</li>
<li>Punkt 2-3</li>
</ul>
</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
</ul>
</div>
</body>
</html>
Um die einzelne Menüpunkte besser zu unterscheiden, wollte ich unter jeden Menüpunkt eine dezente Linie einsetzen. Dies habe ich mit border der Liste gemacht, leider wird jetzt bei verschachtelte Punkte die Linie dann eingesetzt wenn die Liste im Code endet also bei </li> und dies ist teilweise nach </ul>!
Wie kann ich das am besten realisieren?
Leider kann ich auch keine zusätzliche Klassen in HTML-Code einsetzen, denn dieser kommt dynamisch vom CMS.
Bin für jede Hilfe dankbar
Wandler