2 つのレベルを持つ純粋な css ドロップダウン メニューを作成しました。最初のレベルは正常に動作します。しかし、親の李の左側に飛び出さなければならない 2 番目のレベルは、李の上に固定された位置に表示されます。http://joomlaosw.oswebware.com/ (メニュー項目「テンプレートについて」)を参照してください。
ご覧のとおり、すべてのフライアウト サブメニューの位置は、すべての li に対して固定されています。フライアウト サブメニューを親の li に合わせて表示したい。PS: jQuery にはまだ慣れていません。そのため、純粋な CSS メニューを使用しました。
Pls は私にあなたの貴重な提案を与える.
これは私の最初のテンプレートなので、私の仕事を改善するための提案も大歓迎です (主な問題は別として)。前もって感謝します。アヌ
これはコードの関連部分にすぎないことに注意してください... Uはfirebugを使用してチェックするか、必要に応じて完全なコードを送信します...
htmlコード
<ul class="menu ">
<li class="item-101 current active"><a href="/">Home</a>
</li>
<li class="item-109 deeper parent"><a href="/">About Template</a>
<ul>
<li class="item-103 deeper parent"><a href="/index.php/2013-09-14-00-17-18/typography">Typography</a>
<ul>
<li class="item-125"><a href="/">Sub Menu I</a>
</li>
</ul>
</li>
<li class="item-112 deeper parent"><a href="/index.php/2013-09-14-00-17-18/module-positions">Module Positions</a>
<ul>
<li class="item-126"><a href="/">Sub Menu II</a>
</li>
</ul>
</li>
<li class="item-113 deeper parent"><a href="/index.php/2013-09-14-00-17-18/styles">Styles</a>
<ul>
<li class="item-121"><a href="/index.php/2013-09-14-00-17-18/styles/blue">Blue</a>
</li>
<li class="item-123"><a href="/index.php/2013-09-14-00-17-18/styles/green">Green</a>
</li>
<li class="item-124"><a href="/index.php/2013-09-14-00-17-18/styles/black">Black</a>
</li>
<li class="item-122"><a href="/index.php/2013-09-14-00-17-18/styles/red">Red</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="item-110"><a href="/">Buy Now</a>
</li>
<li class="item-111"><a href="/">Contact Us</a>
</li>
</ul>
CSS
.menu {
margin: 100px auto;
text-align: center;
}
.menu ul {
display: none !important;
}
.menu ul li:hover > ul {
display: block;
}
.menu li:hover > ul {
display: block !important;
top: 20px;
position: absolute;
width: 150px;
}
.menu ul {
background-color: #FFFFFF;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-top: -5px !important;
z-index:3;
}
.menu ul li {
float: left;
}
.menu ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
.menu ul ul {
padding: 0;
position: relative;
top: 0;
left:100%;
}
.menu ul ul li {
float: left;
position: relative;
}
.menu ul ul li a {
padding: 15px 40px;
color: #fff;
}
.deeper.parent ul li a {
border: medium none !important;
padding: 15px 0 0 !important;
margin-top: -5px;
}