次のサイトhttp://jsfiddle.net/Me4fw/4/ があり、水平のサブメニューを持つ水平 css ドロップダウン メニューを実装しようとしています。私はすべてを試しましたが、サブメニュー項目を互いにインラインで配置するものはないようです。私ができることは、それらを互いにマッシュアップして、醜い/読めないようにすることだけです。
質問する
10559 次
3 に答える
3
問題は、サブメニューを親liに絶対的に配置していることです。ただし、親liの幅は狭くなっています。
解決策は、サブメニューをメニューラッパーに絶対的に配置することです。
実用的なプレゼンテーションでこのリンクを参照してください！
CSSを更新します：
#menu {
width: 820px;
height: 60px;
margin: 0 auto;
padding: 0px 40px;
position: relative;
}
#menu li {
float: left;
}
#menu ul ul {
list-style-type: none;
position: absolute;
z-index: 500;
left: 0;
right: 0;
}
そしてこのCSSを削除します：
#menu ul li ul li #jackie_spencer{
display: inline;
position: absolute;
top: 20px;
left: 0;
width: 100px;
color: #FFF;
}
ノート：
ソースを表示して、CSS：を確認できます。
- 「更新された」と表示されている場合、いくつかの定義が変更されました。
- 「更新、削除」と表示されている場合、宣言は削除されました。
于 2012-05-22T22:25:33.537 に答える
1
私はあなたのページを見ました、そしてあなたのサブメニューが垂直である理由はサブメニュー<ul>が狭すぎるからです：その幅は囲んでいるのと同じ<li>です。使用可能なすべてのスペースを占めるように、幅を設定する必要があります。
親要素と左揃えにし、メニューバーの右端と右揃えにするのは注意が必要です。そこにあることがわかっているすべてのものを保持するのに十分な幅に設定し、リフローがないと想定することもできます。
また、JavaScriptを使用して、適切な位置を計算することもできます。JQueryはそのために適しています。$（document）.ready（）の一部として、ページが最初にロードされたときに一度だけ設定する必要があります。
于 2012-05-22T22:27:09.143 に答える
0
第 2 レベルのサブメニューを提供するための微調整:
/* Menu */
#menu { /* UPDATED */
width: 820px;
height: 60px;
margin: 0 auto;
padding: 0px 40px;
position: relative;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
line-height: normal;
line-style: none;
list-style-type: none;
}
#menu a {
display: block;
height: 20px;
margin-right: 1px;
padding: 10px 20px 0px 20px;
/* height: 40px;
margin-right: 1px;
padding: 20px 20px 0px 20px;*/
text-decoration: none;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
border: none;
}
#menu a:hover {
background: url(images/page-content-bg.png) repeat;
}
#menu ul ul a:hover {
background: url(images/page-menu-bg.png) repeat;
}
#menu .current_page_item a {
background: url(images/page-content-bg.png) repeat;
}
#menu li { /* UPDATED */
float: left;
}
/* UPDATED, REMOVED
#menu ul li ul li #jackie_spencer{
display: inline;
position: absolute;
top: 20px;
left: 0;
width: 100px;
color: #FFF;
}
*/
#menu ul ul { /* UPDATED */
list-style-type: none;
position: absolute;
z-index: 500;
left: 50px;
right: 0;
}
#menu ul ul ul {
position: absolute;
/* top: 0;
left: 100%;*/
z-index: 500;
left: 50px;
right: 0;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
div#menu ul ul li:hover { background:#c0c0c0;}
div#menu ul ul li { background:#cccccc;}
div#menu ul ul li a:hover { color:#000;}
ページコード
<div id="menu">
<ul>
<li class="current_page_item"><a id="home_menu" href="#Home">Home</a><ul>
<li><a href="#">linkx</a></li>
<li><a href="#">linkx</a></li>
<li><a href="#">linkx</a></li>
<li><a href="#">linkx</a></li>
<li><a href="#">linkx</a></li>
<li><a href="#">linkx</a>
<ul>
<li><a href="#">linky</a></li>
<li><a href="#">linky</a></li>
<li><a href="#">linky</a></li>
<li><a href="#">linky</a></li>
<li><a href="#">linky</a></li>
<li><a href="#">linky</a></li>
</ul>
</li>
</ul></li>
<li><a id="aboutus_menu" href="#About_Us">About Us</a><ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul></li>
</ul>
<ul>
<li><a id="what_we_do" href="#What_We_Do">What We Do</a>
<ul>
<li><a id="jackie_spencer" href="#Jackie_Spencer">Hypnotherapy</a></li>
<li><a id="diana_menz" href="#Diana_Menz">Massage</a></li>
<li><a id="afton_land" href="#Jackie_Spencer">Estitician</a></li>
</ul>
</li>
</ul>
<ul>
<li><a id="contactus_menu" href="#Contact_Us">Contact Us</a><ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul></li>
</ul>
</div>
于 2013-03-18T08:56:33.007 に答える