メニューリストの項目の幅が変更を拒否していますか？

Question

私のCSSコードが...

.list { 
    position: relative; 
    width: 200px; 
    margin-left: 110px; 
    margin-right: auto; 
} 
#menucontainer { 
    position: relative; 
    z-index: 2; 
    background: #ffffff; 
    width: 1001px; 
} 
#menu { 
    position: relative; 
    color: #999999; 
    margin: 0px auto; 
} 
#menu ul { 
    list-style-type: none; 
} 
#menu ul li { 
    z-index: 2; 
    float: left; 
    position: relative; 
} 
#menu ul li a { 
    background-color: #ffffff; 
    width: 91px; 
    height: 40px; 
    display: block; 
    text-align: center; 
    color: #999999; 
    text-decoration: none; 
} 
#menu ul li a:hover { 
    background: #12aeef; 
    color: #ffffff; 
} 
#menu ul li ul { 
    display: none; 
} 
#menu ul li:hover ul { 
    display: block; 
    position: absolute; 
} 
#menu ul li:hover ul li { 
    width: 100px; 
    height: 40px; 
    overflow: hidden; 
} 
#doubleline { 
    line-height: 20px; 
} 
#regularline { 
    line-height: 40px; 
} 

で、メニューのための私のhtmlは、私は第二層の幅を変更傾ける何らかの理由で今...

<div id="menucontainer"> 
    <div id="menu"> 
     <ul> 
      <li id="regularline" ><a href=""><b>Home</b></a></li> 
      <li id="regularline" ><a href="#"><b>HTML</b></a> 
       <ul> 
        <li id="regularline" ><a href="#"><b>Introduction</b></a></li> 
        <li id="doubleline" ><a href="#"><font size="2"><b>Making an HTML File</b></font></a></li> 
        <li id="regularline" ><a href="#"><b>Hello World</b></a></li> 
        <li id="regularline" ><a href="#"><b>Body</b></a></li> 
        <li id="regularline" ><a href="#"><b>Font</b></a></li> 
        <li id="regularline" ><a href="#"><b>DIV</b></a></li> 
        <li id="regularline" ><a href="#"><b>Tables</b></a></li> 
        <li id="regularline" ><a href="#"><b>Links</a></li> 
        <li id="regularline" ><a href="#">Images</b></a></li> 
        <li id="doubleline" ><a href="#"><font size="2"><b>Bold, Ittalics, and Underline</b></font></a></li> 
        <li id="regularline" ><a href="#"><b>Positioning</b></a></li> 
        <li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li> 
       </ul> 
      </li> 
      <li id="regularline" ><a href="#"><b>PHP</b></a> 
       <ul> 
        <li id="regularline" ><a href="#"><b>Introduction</b></a></li> 
        <li id="regularline" ><a href="#"><font size="2"><b>Making a PHP file</b></font></a></li> 
        <li id="regularline" ><a href="#"><b>Hello World</b></a></li> 
        <li id="regularline" ><a href="#"><b>Echoing</b></a></li> 
        <li id="regularline" ><a href="#"><b>Variables</b></a></li> 
        <li id="regularline" ><a href="#"><b>If Statements</b></a></li> 
        <li id="regularline" ><a href="#"><b>Functions</b></a></li> 
        <li id="regularline" ><a href="#"><b>Forms</b></a></li> 
        <li id="regularline" ><a href="#"><b>MySQL</b></a></li> 
        <li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li> 
       </ul> 
      </li> 
      <li id="regularline" ><a href="#"><b>Java</b></a> 
       <ul> 
        <li id="regularline" ><a href="#"><b>Introduction</b></a></li> 
        <li id="regularline" ><a href="#"><b>Using Java</b></a></li> 
        <li id="regularline" ><a href="#"><b>Hello World</b></a></li> 
        <li id="regularline" ><a href="#"><b>Variables</b></a></li> 
        <li id="regularline" ><a href="#"><b>Functions</b></a></li> 
        <li id="regularline" ><a href="#"><b>Alerts</b></a></li> 
        <li id="regularline" ><a href="#"><font size="2"><b>Getting Elements</b></font></a></li> 
        <li id="regularline" ><a href="#"><b>Mouse Events</b></a></li> 
        <li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li> 
       </ul> 
      </li> 
      <li id="regularline" ><a href="#"><b>JQuery</b></a> 
       <ul> 
        <li id="regularline" ><a href="#"><b>Introduction</b></a></li> 
        <li id="regularline" ><a href="#"><b>Using JQuery</b></a></li> 
        <li id="regularline" ><a href="#"><b>Hello World</b></a></li> 
        <li id="regularline" ><a href="#"><b>Variables</b></a></li> 
        <li id="regularline" ><a href="#"><b>Functions</b></a></li> 
        <li id="regularline" ><a href="#"><b>Alerts</b></a></li> 
        <li id="regularline" ><a href="#"><font size="2"><b>Getting Elements</b></font></a></li> 
        <li id="regularline" ><a href="#"><b>Mouse Events</b></a></li> 
        <li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li> 
       </ul> 
      </li> 
      <li id="regularline" ><a href="#"><b>CSS</b></a> 
       <ul id="regularline" > 
        <li id="regularline" ><a href="#"><b>Introduction</b></a></li> 
        <li id="regularline" ><a href="#"><font size="2"><b>Making a CSS File</b></font></a></li> 
        <li id="regularline" ><a href="#"><b>Hello World</b></a></li> 
        <li id="regularline" ><a href="#"><b>Classes</b></a></li> 
        <li id="regularline" ><a href="#"><font size="2"><b>Getting Elements</b></font></a></li> 
        <li id="regularline" ><a href="#"><b>Hover</b></a></li> 
        <li id="regularline" ><a href="#"><b>Tips and Extras</b></a></li> 
       </ul> 
      </li> 
      <li id="regularline" ><a href="../code_editor/"><b>Code Editor</b></a></li> 
      <li id="regularline" ><a href="sign_in/"><b>Sign In</b></a></li> 
      <li id="regularline" ><a href="register/"><b>Register</b></a></li> 
      <li id="regularline" ><a href="#"><b>Forums</b></a></li> 
      <li id="regularline" ><a href="#"><b>Contact Us</b></a></li> 
     </ul> 
    </div> 
</div> 

です。

#menu ul li:hover ul li { 
    width: 100px; 
    height: 40px; 
    overflow: hidden; 
} 

は変更する必要があります。テストとして私は親の91の代わりに100pxに設定しました。高さはうまく変わるが、幅は拒否する。助けてください私は困惑しています。/b

Answer 1

これはあなたの問題を解決します#menu ul li:hover ul li a { width: 200px; height: 40px; overflow: hidden; }あなたはサブULIにaを指定する必要があります。私はこれが役立つことを願っています

EDIT：あなたはまた、より良いインデントを与えてください。この#menu ul li:hover ul { width: 200px; }