✔ Navigation mit Trennstrichen

[elch_guru]

Hallo liebe Forumsgemeinde,

ich stehe gerade auf dem Schlauch und vielleicht hat einer von Euch eine Lösung:
ich habe ein Template mit einer Navigation, die nach unten mit Untermenüpunkten ausklappt (siehe Bild im Anhang). Nun möchte ich aber, dass die Trennstriche bei einem Untermenüpunkt nicht direkt nach dem Hauptmenüpunkt (siehe im Bild Menüpunkt Kontakt) sondern dann zum Schluss also nach Impressum kommen, damit der User besser sieht, dass dies eine Kategorie ist.

Hier ist mein Code aus dem template:

HTML-Code:
a.mainlevel-nav:link, a.mainlevel-nav:visited {
	font-size:14px;
	text-align:left;
	text-Decoration: none;
	width:160px;
	height:20px;
	padding:3px;
	color: #656462;
        font-style: normal;
	font-weight: normal;
        display: block;
        line-height: 22px;
        border-bottom: 1px solid #B2B2B2;
}

a.mainlevel-nav:hover {
	color:#000000;
        background-color:#A1A1A1;
}

a.mainlevel-nav#active_menu {
	text-decoration: none;
	color: #656462;
	font-size:14px;
        font-style: normal;
	font-weight: bold;
}

a.mainlevel-nav#active_menu:hover {
	color: #000000;
}

.sublevel-nav:link, a.sublevel-nav:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 14px;
        width:140px;
	color: #656462;
	text-align: left;
        font-style: normal;
	font-weight: normal;
	text-Decoration: none; 
}

a.sublevel-nav:hover {
	color:#000000;
        background-color:#A1A1A1;
}
a.sublevel-nav#active_menu {
	color: #656462;
         font-style: normal;
	font-weight: bold;
}

Schon jetzt einmal DANKE für die Hilfe.
Gruß elch_guru

 

[Quaese]

Hi,

vielleicht hilft es, wenn du die Listenpunkte mit Trennlinien versiehst.

Dazu müsste die erste Liste eine feste Grösse bekommen. Dafür werden die Breitenangaben aus den Links entfernt, damit sie sich dem zur Verfügung stehenden Platz anpassen (die Breite kann natürlich auch an entsprechende Anforderungen angepasst werden).

Weiterhin werden die Links der zweiten Liste als Blockelemente ausgezeichnet.

Mein Vorschlag:

ul.nav-lvl01{ width: 180px;}
ul.nav-lvl01 li{ border-bottom: 1px solid #b2b2b2;}
ul.nav-lvl01 li ul li{ border-bottom: 0 !important;}

a.mainlevel-nav:link, a.mainlevel-nav:visited {
  font-size:14px;
  text-align:left;
  text-Decoration: none;
  height:20px;
  padding: 3px;
  color: #656462;
  font-style: normal;
  font-weight: normal;
  display: block;
  line-height: 22px;
}

a.mainlevel-nav:hover {
  color:#000000;
  background-color:#A1A1A1;
}

a.mainlevel-nav#active_menu {
  text-decoration: none;
  color: #656462;
  font-size:14px;
  font-style: normal;
  font-weight: bold;
}

a.mainlevel-nav#active_menu:hover {
  color: #000000;
}

.sublevel-nav:link, a.sublevel-nav:visited {
  padding-left: 1px;
  display: block;
  height: auto !important;
  height: 1%;
  vertical-align: middle;
  font-size: 14px;
  color: #656462;
  text-align: left;
  font-style: normal;
  font-weight: normal;
  text-Decoration: none;
}

a.sublevel-nav:hover {
  color:#000000;
  background-color:#A1A1A1;
}
a.sublevel-nav#active_menu {
  color: #656462;
  font-style: normal;
  font-weight: bold;
}

Die zugehörige HTML-Passage:

<ul class="nav-lvl01">
  <li><a class="mainlevel-nav" href="#">Partner</a></li>
  <li><a class="mainlevel-nav" href="#">Downloads</a></li>
  <li><a class="mainlevel-nav" href="#">Impressionen</a></li>
  <li><a class="mainlevel-nav" href="#">Kontakt</a>
    <ul>
      <li><a class="sublevel-nav" href="#">Anfahrt</a></li>
      <li><a class="sublevel-nav" href="#">Formular</a></li>
      <li><a class="sublevel-nav" href="#">Impressum</a></li>
    </ul>
  </li>
</ul>

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese

 

[elch_guru]

Hallo Quaese,

super, das geht. 1000 Dank.

Gruß elch_guru