サブメニュで垂直のMenueの幅は同じですがCSSコードは同じ

Question

右のサイトにサブメニュー付きの垂直メニューバーを書きたいと思います。 これは最初のサブでは機能しますが、2番目のサブは最初のサブよりもさらに薄いです。明らかに彼らは同じコードを持っていますが、彼らは異なっているように見えます。ここで

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> 

、ここで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; 
} 

。

種類よろしく

Ascawath

Answer 1

はこのCSSを追加します。

.menu ul ul{ 
    width:100% 
} 

Jsfiddle