Как я могу сделать выпадающее меню

Question

CSS

.nav { 
    margin-top: 0px; 
    margin-left: 0%;  
} 
.nav ul { 
    width: 100%; 
    height: auto; 
    background-color: #fff; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    display: absolute; 
    z-index: 2; 
    /*top: -124px;*/ 
    position: fixed; 
    border-bottom: 2px #009759 solid; 
} 
.nav ul li { 
    margin-top: 5px; 
    color: white; 
    list-style-type: none; 
    display: inline; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 20px; 
    padding-bottom: 22px; 

    border-radius: 0px; 
} 
.nav ul li a 
{ 
    color: #009759; 
    text-decoration:none; 
} 
.nav ul li active { 
    color: #ff0000; 
} 

Каков наилучший способ сделать выпадающее меню из одного из моих кнопок меню заголовка? Я включил мой файл CSS для заголовка, но теперь мне нужно, чтобы вы рассказали мне, как сделать выпадающий список.

Answer 1

Вы можете сделать выпадающий список во многом .. обычный метод, сделав JavaScript коды, которые будут обрабатывать события при наведении на выбранном меню ..

Есть много хороших учебников в Интернете, которые могут помочь вам .. как этот dropdown with javascript

, но если вы ищете чистый CSS выпадающего меню, вы также можете посмотреть по этой ссылке: dropdown pure css

Answer 2

вы можете использовать Jquery для этого. Я сделал это раньше, и хотя это может показаться немного грубым с кодом, он работает чудесно.

$(".nav ul, .nav ul li, .nav ul li a").hide(); 
$(".nav").hover(function(){ 
    $(".nav ul, .nav ul li, .nav ul li a").show(500); 
});