javascript - 使用 Javascript 实现水平子菜单

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 选项将出现在其下方的第二级菜单中。当用户将鼠标悬停在顶层的 opt2 上时，将显示第二层的 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>

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