Css 将列表项转换为不带Jquery的下拉菜单

我列出了下列项目。我使用的是Angular JS应用程序。我需要使用CSS将它们表示为下拉菜单。我不应该包括任何jqueryjs文件

• 英式
• 西班牙人
• 法国
• 意大利人

---

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

您将想用

显示隐藏列表：无然后在悬停时再次显示

查看此示例
，使用此示例，您可以

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

请随意布置

HTML

ps：我在这里看到了
这是小提琴你试了什么？粘贴一些CSS。看起来不错，但是，我需要单击它。。不要悬停。。还有一件事是，悬停时页面布局会发生变化。要在单击时进行更改，您需要一些javascript。布局发生了变化，因为我在CSS中拼写完全错误，请参见此编号。。你误会我了。我的场景是这样的。最初，将选择英语并显示它，如果用户想要更改语言，他将单击该语言以显示其他语言的列表。就像任何航空公司网站上的语言选择一样。好的！CSS不调用事件和函数。因此，您必须使用Javascript。
Here is my fiddle.. http://jsfiddle.net/CDrLV/

<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>

* {
    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;
}