Thema: Menülinks über 2 Zeilen bündig untereinander

Im betreffenden CSS Bereich den text-indent mit padding-left austauschen.
Musst aber aufpassen, da sich deine Klasse vererben.
Also für den "ul li ul li a" Bereich eine neue Klasse anlegen und entgegensteuern.

Übrigens ist die CSS und deren Klassenverteilung sehr schlecht gelöst.
Vieles überschreibt sich mehrmals und befindet sich auch mehrmals in anderen Klassen, amateur css

Habe ein ähnliches Problem. (joomla 1.5.14)

Bei meinen menü habe ich "///" als design davor gesetzt.
Dieses markiert den aktiven Beitrag. Mit padding ist er nun so ausgerichtet, das wenn das icon davor kommt, der Text immer noch gut ausgerichtet ist.

Code:

/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}

div.moduletable_mmenu h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #eee;
	/*margin: -23px -4px 5px -5px;*/
	padding-left: 10px;
	padding-bottom: 2px;
}

div.moduletable_mmenu {
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
}

div.moduletable_mmenu ul li a:link, div.moduletable_mmenu ul li a:visited {
	font-weight: bold;
}

#leftcolumn ul {
	list-style-type:none;
  border-bottom: 1px dotted #5E8510;
	padding: 0px;
  margin: 0px;
}
#leftcolumn ul li a{
	display:block;
  font-size: 12pt;
  padding:5px 0.6em 5px 23px;
  line-height: 1.2em;
	border-top-width: 1px;
	border-top-style:dotted;
	text-decoration:none;
}
#leftcolumn ul li a:hover,#leftcolumn ul li a:active,#leftcolumn ul li a:focus, #leftcolumn ul li.current a{
  /*text-decoration:underline;*/
	overflow:hidden;
	/*color: #06c; background-color: #ededed;*/
}



#leftcolumn ul li#current a, #leftcolumn ul li a:hover { 
  padding-left: 7px; 
}
#leftcolumn ul li#current a:before, #leftcolumn ul li a:hover:before { 
  content: "/// ";
}



#leftcolumn ul li ul li a, #leftcolumn ul li#current ul li a{
	display:block;
  font-size: 1em;
  padding-left: 43px;
  padding-top: 3px;
  border-top-width: 0px;
}
#leftcolumn ul li ul li#current a, #leftcolumn ul li ul li a:hover, #leftcolumn ul li#current ul li a:hover { 
  padding-left: 31px;
}
#leftcolumn ul li#current ul li a:hover:before, #leftcolumn ul li ul li#current a:before, #leftcolumn ul li ul li a:hover:before{
  content: "/// ";
}
#leftcolumn ul li#current ul li a:before {
  content: ""; 
}
#leftcolumn ul li ul { border-bottom: none; border-top-style: none; }
/* forms */

Komme da leider nicht mehr weiter.



Des weiteren funktioniert das mit dem icon auch nur wenn ich in dem menü bin. Sprich, wen das obere menü noch aktive ist, kommen dies icons nicht wenn ich über die Unterpunkte meine Maus bewege.

Danke