Javascript 水平菜单子菜单_Javascript_Jquery_Html_Css_Menu

Javascript 水平菜单子菜单

javascript jquery html css menu

Javascript 水平菜单子菜单,javascript,jquery,html,css,menu,Javascript,Jquery,Html,Css,Menu,对于每个菜单项，我有一个水平列表菜单和另一个水平列表子菜单。现在，当页面第一次加载时，第一个顶部菜单及其子菜单和其他顶部菜单应显示，如果我将鼠标移走或将鼠标悬停在其他顶部菜单项上，则应保持打开状态。当我将鼠标悬停在其他菜单上时，它们相应的子菜单应该会显示出来有人能告诉我如何只使用javascript、jquery或css吗 <div id="mytabs1" class="basictab"> <ul> <li class="basict

对于每个菜单项，我有一个水平列表菜单和另一个水平列表子菜单。现在，当页面第一次加载时，第一个顶部菜单及其子菜单和其他顶部菜单应显示，如果我将鼠标移走或将鼠标悬停在其他顶部菜单项上，则应保持打开状态。当我将鼠标悬停在其他菜单上时，它们相应的子菜单应该会显示出来

有人能告诉我如何只使用javascript、jquery或css吗

<div id="mytabs1" class="basictab">
    <ul>
        <li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li>
        <li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li>
        <li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
    </ul>
</div>

<DIV class="tabcontainer">
    <div id="sc1" class="tabcontent">
        <ul>
        <li><a id="link1-1" href="http://test.com">Link 1a</a></li>
        <li><a id="link1-2" href="http://test.com">Link 1b</a></li>
        </ul>
    </div>  
    <div id="sc2" class="tabcontent">
        <ul>
        <li><a id="link2-1" href="http://test.com">Link 2a</a></li>
        <li><a id="link2-2" href="http://test.com">Link 2b</a></li>
        </ul>
    </div>  
    <div id="sc3" class="tabcontent">
        <ul>
        <li><a id="link3-1" href="http://test.com">Link 3a</a></li>
        <li><a id="link3-2" href="http://test.com">Link 3b</a></li>
        </ul>
    </div>  
</DIV>

以下是一个示例，为您指明正确的方向

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <style>
            ul, li
            {
                display: block;
            }
            .sublinks
            {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="mytabs1" class="basictab">
            <ul>
                <li class="basictab1" id="li1">
                    <a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a>
                    <ul class="sublinks">
                        <li><a id="link1-1" href="http://test.com">Link 1a</a></li>
                        <li><a id="link1-2" href="http://test.com">Link 1b</a></li>
                    </ul>
                </li>
                <li class="basictab1" id="li2">
                    <a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a>
                    <ul class="sublinks">
                        <li><a id="link2-1" href="http://test.com">Link 2a</a></li>
                        <li><a id="link2-2" href="http://test.com">Link 2b</a></li>
                    </ul>
                </li>
                <li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
            </ul>
        </div>
        <script>
            $('.basictab1').hover(function()
            {
                $(this).find('ul').toggle();
            });
        </script>
    </body>
</html>


李先生
{
显示：块；
}
.子链接
{
显示：无；
}















$（'.basictab1'）。悬停（函数（）
{
$（this.find（'ul'）.toggle（）；
});