1

我正在尝试使用水平菜单，当您将鼠标悬停在某个项目上时，会在其下方显示一个垂直菜单（menu2）。当悬停在菜单 2 中的某个项目上时，第三个菜单出现在 menu2 旁边，与菜单 2 中悬停的项目高度相同。 http://gcommerce2.gtdsites.com/（这是我在下面构建的菜单上面写着“主页”）我得到了一切工作。您在 menu2 中悬停以显示 menu3 的项目是“submenu2”。唯一的问题是，当您将鼠标移到菜单 3 中尝试选择其中一项时，在您将鼠标移到菜单 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 回答