1

水平メニューを作成しようとしていますが、アイテムにカーソルを合わせると、その下に垂直メニューが表示されます (menu2)。メニュー 2 の項目にカーソルを合わせると、メニュー 2 の横に、メニュー 2 でカーソルを合わせている項目と同じ高さで 3 番目のメニューが表示され ます。 「ホームページ」と書かれている場所)私はそれをすべて機能させました。menu2 でホバーして menu3 を表示する項目は「submenu2」です。唯一の問題は、マウスを上に移動してメニュー 3 の項目の 1 つを選択しようとすると、メニュー 3 にマウスを移動する前にすべてが消えてしまうことです。コードは次のとおりです。

<style>
nav a { 
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul { 
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }

/* Top-level menu */
nav > ul > li { 
float: left;
position: relative; }
nav > ul > li > a { 
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul { 
position: absolute;
background: #ccc;
width: 100%; 
margin: 0;
padding: 0;
display: none; }
nav ul li ul li { 
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }


a.menu2:link + ul.menu3 {display: none;}
a.menu2:hover + ul.menu3 {display: inline-block; }

.format_text ul ul {
margin: 0 0 0 .95em;
}

a.menu2, li.menu2 {display: inline-block;}

ul.menu2, ul.menu3 {border: black 2px solid;}


</style>

<nav>
<ul>
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Link2</a>
        <ul class="menu2">
            <li><a href="#">Submenu1</a></li>

            <li class="menu2"><a class="menu2" href="#">Submenu2</a>



            <ul class="menu3">
            <li><a class="menu3" href="#">gmenu1</a></li>
            <li><a href="#">gmenu22</a></li>
            <li><a href="#">gmenu3</a></li>

            </ul>





            </li>
            <li><a href="#">Submenu3</a></li>

        </ul>
    </li>
    <li><a href="#">Link3</a></li>
   </ul>
</nav>

<br style="clear:both;"/>

誰でもこれを手伝ってもらえますか?

4

2 に答える 2

0

http://jqueryui.com/menu/プラグインをご覧ください。独自のメニュー構造をコーディングしようとするよりもはるかに簡単です

example http://jsfiddle.net/h7N5R/

于 2013-09-02T19:13:49.137 に答える
0

アンカータグではなく、リストアイテムのホバーをターゲットにしたい

変化する

a.menu2:hover + ul.menu3 {display: inline-block; }

li.menu2:hover > ul.menu3 {display: inline-block; }

参照: http://jsfiddle.net/VdqnD/

于 2013-09-03T00:01:12.177 に答える