Question

我的列表项目如下。我正在使用Angular JS应用程序。我只需要使用CSS将它们表示为下拉菜单。我不应该包含任何JQuery js文件

英文
Español
Française
意大利语

Here is my fiddle.. http://jsfiddle.net/CDrLV/

任何人都可以查看以下代码吗？

Answer 1

您需要使用display: none;隐藏列表，然后在悬停时再次显示。

请参阅此jsFiddle以获取示例

Answer 2

有了这个，你可以http://jsfiddle.net/RdNw4/3/

但我不知道它在IE中是否正常工作。（可能不是）

帮助自己进行布局。

HTML

<div class="nav">
    <div>Select Language</div>

    <ul>
        <li><a href="">English</a></li>
        <li><a href="">Español</a></li>
        <li><a href="">Française</a></li>
        <li><a href="">Italian</a></li>
    </ul>  
</div>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 50px;

    background: #f3f3f3;
} 

.nav {
    padding: 10px;
    border: 1px solid #ccc;
    display: inline-block;

    background: #fff;

    position: relative;
}

.nav ul {
    padding: 5px;
    border: 1px solid #ccc;
    display: none;

    background: #fff;

    list-style: none;

    position: absolute;
    top: 100%;
    left: 0;
}

.nav:hover ul {
    display: inline-block;
}

ps：我在这里看到http://jsfiddle.net/UR4Up/

将List项目转换为没有Jquery的下拉菜单

2 个答案: