Question

我需要为导航菜单创建一个简单的jQuery下拉框。问题是，我尝试过很多我可以在网上找到的选项，但由于某种原因，他们都拒绝工作或者只是功能不足。

这是我的菜单html：

    <div id="menudiv">
    <ul>
        <a href="[[~1]]"><li>Item 1</li></a>
        <a href="[[~7]]"><li>Item 2</li></a>
        <a href="[[~3]]"><li>Item 3
        <div class="submenu">
        <a href="#"><p>subItem 1</p></a>
        <a href="#"><p>subItem 2</p></a>
        </div>
        </li></a>
        <a href="[[~4]]"><li>Item 4</li></a>
        <a href="[[~5]]"><li>Item 5</li></a>
    </ul>
</div>

Answer 1

您的HTML无效。你需要先修复它。您可以使用纯css和html来解决您的问题：

html

<ul>
    <li><a href="#">Menu Item 1</a></li>  
    <li><a href="#">Menu Item 2</a></li>  
    <li><a href="#">Menu Item 3</a></li>  
    <li><a href="#">Menu Item 3</a>
        <ul>
            <a href="#">Sub Menu Item 1</a>
            <a href="#">Sub Menu Item 2</a>    
            <a href="#">Sub Menu Item 3</a>
        </ul>
    </li> 
    <li><a href="#">Menu Item 3</a></li> 
</ul>

CSS

ul li { float:left; margin:3px; }
ul li ul { display:none; }
ul li:hover ul { display:block; position: absolute; }

代码：http://jsfiddle.net/3xhtN/

jQuery子菜单帮助

1 个答案: