轉換列表項作爲下拉菜單沒有jquery

-2

我有列表項如下。我正在使用Angular JS應用程序。我需要簡單地使用CSS將它們表示爲下拉菜單。我不應該包含任何JQuery的js文件轉換列表項作爲下拉菜單沒有jquery

英語
宜山路＆ntilde;醇：
弗朗索瓦·AISE
意大利

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

任何一個可以看看下面的代碼？

來源

2014-01-17 Syed

代碼.... – LinkinTED

這是小提琴的http：//的jsfiddle。 net/CDrLV/ – Syed

你試過了什麼？粘貼一些CSS。 – enguerranws

您需要隱藏display: none;的列表，然後在懸停時再次顯示。

看到這個jsFiddle爲例

來源

2014-01-17 10:26:37 Martin

看起來不錯，但是，我需要點擊它..不是懸停..還有一件事是，頁面佈局在懸停時發生變化。 – Syed

要點擊它，你需要一些JavaScript。佈局改變了，因爲我拼寫絕對錯誤的CSS，看到這個[更新示例]（http://jsfiddle.net/RdNw4/1/） – Martin

非常感謝。 – Syed

這個你可以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/

來源

2014-01-17 11:39:53

不，你讓我錯了。我的場景就像..最初，英語將被選中並且應該被顯示，並且如果用戶想要改變語言，他將點擊該語言以顯示其他語言的列表。就像任何航空公司網站上的語言選擇一樣。 – Syed

好的！ CSS不會調用事件和函數。所以你必須使用Javascript。 –

轉換列表項作爲下拉菜單沒有jquery

回答

相關問題