製作下拉菜單

Question

我是web開發新手抱歉。好吧，所以我想讓HTML和CSS菜單在你點擊時放下。我谷歌和所有我能找到的菜單，當你將鼠標懸停在它們上面時，

基本上我想要的東西，像this

到目前爲止，我已經嘗試過這種

CSS

.menu-item { 
    background: #fff; 
    width: 50px; 
} 
.menu-item ul { 
    background: #fff; 
    font-size: 13px; 
    line-height: 30px; 
    list-style-type: none; 
    overflow: hidden; 
    padding: 0px; 
} 
.menu-item ul { 
    background: #fff; 
    font-size: 13px; 
    line-height: 30px; 
    height: 0px; 
    list-style-type: none; 
    overflow: hidden; 
    padding: 0px; 
} 
.menu-item:focus ul { 
    height: 93px; 
} 
.menu-item h4 a { 
    display: block; 
    text-decoration: none; 
    width: 200px; 
    cursor: pointer; 
} 

HTML

<div class="menu-item"> 
    <h4>&#x25BC;</h4> 
    <ul> 
     <li><a href="#">Settings</a></li> 
     <li><a href="#">Log Out</a></li> 
    </ul> 
    </div> 

我也將非常高興，如果你們能給我鏈接到任何教程，這將幫助我做這個菜單。

Answer 1

你可以使用jQuery來簡化它。這是一個JavaScript文件，可讓您輕鬆創建這些菜單。其中一個易於使用的地方可以在這​​裏找到：http://patrickkunka.github.io/easydropdown/