将列表项转换为没有 Jquery 的下拉菜单 [关闭]答案

【问题标题】：Convert List items as drop down menu without Jquery [closed]将列表项转换为没有 Jquery 的下拉菜单 [关闭]
【发布时间】：2014-01-17 19:39:53
【问题描述】：

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

英语
西班牙文
法语
意大利语

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

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

【问题讨论】：

这是小提琴jsfiddle.net/CDrLV
你尝试了什么？粘贴一些 CSS。

标签： css angularjs

【解决方案1】：

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

请参阅此jsFiddle 以获取示例

【讨论】：

看起来不错，但是，我需要点击它.. 不悬停.. 还有一件事是，页面布局会在悬停时改变。
要在点击时执行此操作，您需要一些 javascript。布局发生了变化，因为我在 CSS 中拼写绝对错误，请参阅updated example

【解决方案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/

【讨论】：

不.. 你误会了。我的场景是这样的。最初，会选择英语并显示它，如果用户想更改语言，他会单击该语言以显示其他语言的列表。就像任何航空公司网站中的语言选择一样。
好的！ CSS 不调用事件和函数。所以你必须使用Javascript。