Преобразование элементов списка в виде выпадающего меню без JQuery

Question

У меня есть элементы списка следующим образом. Я использую приложение Angular JS. Мне нужно представить их в виде выпадающего меню, просто используя CSS. Я не должен включать в себя любой Jquery расслоение плотной файл

• English
• Espa & ntilde; Ol
• Fran & ccedil; 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; 
} 

пс: Я видел его здесь http://jsfiddle.net/UR4Up/