Dikey Menüsü Farklı genişlik ama aynı CSS kodu Alt menü

Question

Doğru sitede alt menüleri olan dikey bir menü çubuğu yazmak istiyorum. İlk alt için çalışıyor, ancak ikincisi daha sonra birincisi. açıkçası aynı kodlara sahipler ancak farklı görünüyorlar. İşte

HTML

<div class="left_col"> 
    <div class="menue_left"> 
     <div class="menu"> 
     <ul class="ja"> 
      <li class="ja" id="Willkommen"><a href="'.WB_URL.'/index.php">Willkommen</a></li> 
      <li class="ja SuI" id="SuI"><a href="'.WB_URL.'/Historisches/">Service &amp; Info</a> 
       <ul class="ja"> 
        <li class="ja" id="Historisches"><a href="'.WB_URL.'/Historisches">Historisches</a></li> 
        <li class="ja" id="Oeffnungszeiten"><a href="'.WB_URL.'/Oeffnungszeiten">&Ouml;ffnungszeiten</a></li> 
        <li class="ja" id="Angebot"><a href="'.WB_URL.'/Angebot">Angebot</a></li> 
        <li class="ja" id="Benutzerordnung"><a href="'.WB_URL.'/Benutzerordnung">Benutzerordnung</a></li> 
        <li class="ja" id="Kontakt"><a href="'.WB_URL.'/Kontakt">Kontakt</a></li> 
       </ul> 
      </li> 
      <li class="ja MuK" id="Medien"><a href="'.WB_URL.'/Online-Katalog">Medien &amp; Konto</a> 
       <ul class="ja"> 
        <li class="ja" id="Online-Katalog"><a href="'.WB_URL.'/Online-Katalog">Online-Katalog</a></li> 
        <li class="ja" id="eBook-Ausleihe"><a href="'.WB_URL.'/eBook-Ausleihe">eBook-Ausleihe</a></li> 
       </ul> 
      </li> 
      <li class="ja" id="Impressum"><a href="'.WB_URL.'/Impressum">Impressum</a></li> 
     </ul> 
     </div> 
    </div> 
</div> 

ve burada CSS:

.left_col { 
position: relative; 
margin: 0; 
margin-top: 50px; 
width: 242px; 
height: 820px; 
background: yellow; 
} 

.menue_left { 
position: relative; 
width:198px; 
height: 195px; 
top: 50px; 
margin-left: auto; 
margin-right: auto; 
background: black; 
} 

.menu { 
margin: 0; 
padding: 0; 
position: absolute; 
margin-left: auto; 
margin-right: auto; 
width: 100%; 
} 

.menu ul { 
margin: 0; 
padding: 0; 
line-height: 40px; 
padding: 0; 
} 

.menu li { 
position: relative; 
margin: 0; 
margin-right: auto; 
margin-left: auto; 
margin-top: 5px; 
padding: 0; 
list-style: none; 
width: 186px; 
width: 200px; 
background: #C40012; 
z-index: 100; 
} 

.menu ul li a { 
text-align: center; 
font-family: "Share", "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-weight: bold; 
font-size: 16px; 
height: 40px; 
text-transform: uppercase; 
text-decoration: none; 
display: block; 
color: white; 
border: 1px solid white; 
z-index: 100; 
} 

.menu ul ul li a { 
border: 1px solid white; 
background: #C40012; 
z-index: 100; 
} 

.menu ul li a.ja { 
text-decoration: none; 
} 

.menu ul ul li { 
margin-top: 0; 
width: 100%; 
z-index: 100; 
} 

.menu ul ul { 
position: absolute; 
visibility: hidden; 
top: 0px; 
left: 100%; 
z-index: 100; 
} 

.menu ul li:hover ul { 
visibility: visible; 
z-index: 100; 
} 

.menu li:hover { 
z-index: 100; 
} 

.menu a:hover { 
color: #333333; 
z-index: 100; 
} 

Senden haber bekliyorum.

Saygılarımızla

Answer 1

bu CSS eklemek

Ascawath:

.menu ul ul{ 
    width:100% 
} 

Jsfiddle