asp.net - 在网页上创建下拉菜单的最简单方法？

Question

我正在 ASP.NET 上创建一个小项目。我想要一个简单的下拉菜单。 Web 上的大多数解决方案都使用 jquery。有没有更简单的方法或者我应该学习jquery？

还有一件事。该菜单应该可以在 IE 上运行。

Answer 1

我见过的一些最简洁的下拉实现是基于语义 HTML(无序列表、nav 元素等)和 CSS :hover伪类。当脚本不可用时，语义结构会很好地退化，而当被屏幕阅读器等设备使用时，语义结构会得到很好的解释。

不支持 :hover 伪类的旧版 IE 可以通过脚本片段来适应(不需要 jQuery)。

Suckerfish/Son of Suckerfish 就是这种技术的一个很好的例子。

Code/Description
Examples

示例

这是我可以创建的最简单的实现，它可以在 IE7+、Chrome、FF 等中运行。不需要脚本。

完整示例:http://jsfiddle.net/BejB9/4/

HTML
我会将其包装在完成文档中的 nav 标记中

<ul class="nav">
    <li>This item has a dropdown
        <ul>
            <li>Sub item 1</li>
            <li>Sub item 2</li>
        </ul>
    </li>    
    <li>Item</li>
    <li>So does this item
            <ul>
            <li>Sub item 1</li>
            <li>Sub item 2</li>
        </ul>
    </li>
</ul>

CSS

UL.nav > LI {
    list-style: none;
    float: left;
    border: 1px solid red;
    position: relative;
    height: 24px; /* height included for IE 7 */
}

UL.nav UL{
    left: -10000px;
    position: absolute;            
}

UL.nav > LI:hover UL{
    left: 0;
    top: 24px; /* IE7 has problems without this */
}

​