Создание выпадающего меню

Question

Я новичок в веб-дизайне. ok, поэтому я хочу, чтобы html и css меню выпадали, когда вы нажимаете на него. i google и все, что я мог найти, - это меню, которые расширяются, когда вы наводите на них курсор.

в основном я хочу что-то вроде 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/