[GELÖST] CSS Anpassung von Unterpunkten in minimal_menu.tpl

[Pago83]

Hallo,

ich möchte die Unterpunkte meines Menüs anders gestalten als den übergeordneten Menüpunkt. Ich bekomme es aber irgendwie nicht hin, vielleicht sehe ich auch nur den Wald vor lauter Bäumen nicht. Momentan werden die Unterpunkte wie der "Oberpunkt" dargestellt. Kann mir jemand sagen welchen css Selektor ich benötige um die Unterpunkte anzupassen?

Hier ist der Link zur Seite: http://www.ff-eidelstedt.de/cms

Bitte auf "Fuhrpark" klicken um Unterpunkte zu öffnen.

MfG Pago

[antibart]

Ich kenne jetzt deine stylesheets nicht, aber eine grundstruktur eines "zweistöckigen" Listenmenues wäre so etwa:

Code: Select all

#menu { hier die stile des containers, in dem sich das menu befindet}

#menu ul { hier die stile der liste auf erster ebene}

#menu li { hier die stile der listenpunkte auf erster ebene}

#menu ul ul {hier die stile der liste auf zweiter ebene}

#menu ul ul li {hier die stile der listenpunkte auf zweiter ebene}

#menu a {linkstile erste ebene}

#menu ul ul a {linkstile auf zweiter ebene}

usw

[Pago83]

Hi,

das funktioniert leider auch nicht. Mein Stylesheet sieht wie folgt aus (#left entspricht dem Menü):

Code: Select all

/* *** css by miss monorom www.intensivstation.ch *** */
/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en */

html { height: 101%; }

body {
   color: #333333;
   background-color: #d8d8d8;
   font-size: 0.75em;
   font-family: Helvetica, Verdana, Arial, SunSans-Regular, Sans-Serif;
   padding: 0;
   margin: 0;
}

a:link,
a:visited { color: #3b74cf; text-decoration: none; }

a:hover,
a:focus { 
   color: #3b74cf; 
   text-decoration: underline;
   outline: none;
}

a:active { color: #3b74cf; text-decoration: none; }

h1 { 
   font-size: 1.375em; 
   font-weight: bold;
   padding: 0; 
   margin: 0;
   border-bottom: 1px solid #3b74cf;
}

h2 { 
   font-size: 1.25em; 
   font-weight: bold;
   padding: 10px 0 0 0; 
   margin: 0;	
}

h3 { 
   font-size: 1.125em; 
   font-weight: bold;
   padding: 10px 0 0 0; 
   margin: 0;	
}

p { padding: 10px 0 0 0; margin: 0; }

hr {
   height: 1px;
   color: #3b74cf;
   background-color: #3b74cf;
   border: 0;
}

/* ----------container centers the layout-------------- */
#container {
   width: 70em;
   background-color: #d6e5f8;
   padding: 0;
   margin: 0 auto;   
   border: 1px solid #3b74cf;
   border-top: 0;
}

/* ----------banner for logo-------------- */
#banner {
   text-align: center;
   background-color: #d8d8d8;   
   padding: 0;
   margin: 0;  
}

#breadcrumbs {
   background-color: #3b74cf;
   padding: 0;    
   margin: 0;       
}

#breadcrumbs p { 
   color: #ffffff;
   padding: 10px;
   margin-left: 0;         
}

#breadcrumbs a:link,
#footer a:link,
#breadcrumbs a:visited,
#footer a:visited { color: #ffffff; text-decoration: none; }

#breadcrumbs a:hover,
#footer a:hover,
#breadcrumbs a:focus,
#footer a:focus { 
   color: #ffffff; 
   text-decoration: underline;
   outline: none;
}

#footer a:active,
#breadcrumbs a:active { color: #ffffff; text-decoration: none; }

/* -----------------content--------------------- */
#content {
   min-height: 600px;
   background-color: #ffffff;
   padding: 10px;
   padding-top: 23px;
   margin: 0 15em;
   border-left: 1px solid #3b74cf;
   border-right: 1px solid #3b74cf;
}

#content ul { padding: 10px 0 0 15px; margin: 0; }

#content ul li {
   list-style-type: disc;
   padding: 0 0 5px 0;
   margin: 0;
}

#content ul li ul { padding: 5px 0 5px 30px; margin: 0; }

#content ul li ul li {
   list-style-type: circle;
   padding: 5px 0 5px 0;
   margin: 0;
}

/* --------------left------------- */
#left {
   float: left;
   width: 15em;
   color: #333333;
   padding: 15px 0 0 0;
   margin: 0;		 
}

#left ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

#left li { 
   padding: 5px 0 5px 10px;
   margin: 0;
   border-bottom: 1px dashed #3b74cf;
}

#left ul li a:link,
#left ul li a:visited { 
   color: #333333;
   font-size: 1.25em;
   font-weight: bold;
   display: block;
   text-decoration: none; 
}

#left ul li a:hover,
#left ul li a:focus { 
   color: #3b74cf; 
   text-decoration: none;
   outline: none;
}

#left ul li a:active { color: #333333; text-decoration: none; }

#left ul li a.currentpage { color: #3b74cf; letter-spacing: 3px; }

#right {
   float: right;
   width: 15em;
   color: #333333;
   margin: 0;
   padding: 0;       
}

#right p { padding: 10px; }

/* -----------footer--------------------------- */
#footer {
   clear: both;
   color: #ffffff;
   background-color: #3b74cf;
   padding: 0;
   margin: 0;      
}

#footer p {
   color: #ffffff;
   text-align: right;  
   padding: 10px; 
}

[nockenfell]

Um die zweite Ebene anzusprechen musst du folgendes Hinzufügen:

Code: Select all

#left ul ul li { 
   padding: 5px 0 5px 20px;
   margin: 0;
   border-bottom: 1px dashed #3b74cf;
}

#left ul ul li a:link,
#left ul ul li a:visited { 
   color: #333333;
   font-size: 1.15em;
   font-weight: bold;
   display: block;
   text-decoration: none; 
}

#left ul ul li a:hover,
#left ul ul li a:focus { 
   color: #3b74cf; 
   text-decoration: none;
   outline: none;
}

[Pago83]

Das funktioniert perfekt, danke dir.