私の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
のようなのULのli ULに幅を追加する必要があります。ありがとうございました。 – DonCallisto
そしてjsfiddle.netを使って問題を教えてください。 –
http://jsfiddle.net/MDUhS/単純なコピーは貼り付けますが、何でも可能です。 – Allenph