Question

我正在寻找一些可用于在Javascript（而不是JQuery）中实现水平子菜单的示例。我想要一个SEO友好的菜单。这是我正在寻找的一个例子：

opt1     opt2      opt3       opt4
opt1a opt1b opt1c opt1d

opt1     opt2      opt3       opt4
  opt2a opt2b opt2c opt2d

因此，当用户将鼠标悬停在顶层的opt1上时，opt1a，opt1b，opt1c和opt1d选项将显示在其下方的SECOND级别菜单中。当用户将鼠标悬停在顶层的opt2上时，将显示SECOND级别的opt2a，opt2b，opt2c和opt2d选项。

有没有人见过这方面的代码示例？我想到的是为第二级菜单设置四个不同的DIV，然后在用户将鼠标悬停在不同的顶层时，有一些方法可以使这些DIV可见。这听起来很容易，但我猜它并不那么容易。

Answer 1

制作具有最少跨浏览器麻烦的水平菜单的好方法是使用以下模式。关键是要设计<LI>内的内容，而不是<LI>本身。

<div class="menu">
<ul>
    <li>SOME TITLE</li>
    <li><a href="...">link1</a></li>
    <li><a href="...">2</a></li>
    <li><input type="text" .../></li>
    <li><input type="submit" class="submit" value="Submit"></li>
</ul>
</div>

CSS：

.menu ul, .menu li {
   list-style=type:none;
   padding:0;
   margin:0    
}


.menu li {
    display:inline-block   
}  

.menu a {
     display:block;
    ....other styles....

}

然后你嵌套它们：

<div class="menu">
<ul>
    <li>SOME TITLE</li>
    <li><a href="...">link1</a>
        <ul><li><a href="...">sub1</a></li></ul></li>
    <li><a href="...">2</a></li>
    <li><input type="text" .../></li>
    <li><input type="submit" class="submit" value="Submit"></li>
</ul>
</div>

你是对的，然后使用position：relative on ul li，position：absolute on ul ul etc ...你是在正确的轨道上，但是使用列表，而不是DIV。

Answer 2

<html>
    <head>
        <style type="text/css">


            #menu, #menu li ul{
                display:inline;
                list-style:none;
                margin:0px;
                padding:0px;
                background-color:black;
                color:white;
                padding:5px;

            }

            #menu li ul {
                position: absolute;
                background-color:black;
                color:white;
                padding:5px;
                display:none;

            }
            #menu li, #menu li ul li {

                display:inline;
                list-style:none;
                margin:0px;
                padding:0px;
            }


            #menu li:hover {
                background-color:red;
            }
            #menu li:hover ul {
                display:block;
            } 

        </style>
    </head>
    <body>
        <ul id="menu" >
            <li>Menu 1
                <ul>
                    <li>
                        Hello world
                    </li>
                    <li>
                        Hello world
                    </li>
                    <li>
                        Hello world
                    </li>
                </ul>
            </li>
            <li>Menu 2
                <ul>
                    <li>
                        Hello world
                    </li>
                    <li>
                        Hello world
                    </li>
                    <li>
                        Hello world
                    </li>
                </ul>
            </li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        </ul>
    </body>

</html>

此代码可能与上面相同，但第二级低于顶级。希望这有帮助！

使用Javascript实现水平子菜单

2 个答案: