DobrovoImaster

Создание меню с выпадающими подпунктами на чистом CSS

 
#nav {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1124px;
    height: 34px;
    display: inline-block;
    list-style: none;
    position: relative;
    font-size: 0.8em;
    background: #d0d0d0;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}
#nav>li {
    list-style-type: none;
    float: left;
    display: block;
    margin: 0;
    position: relative;
    padding: 10px;
    width: 120px;
}
#nav>li:hover ul {
    display: block;
}
#nav>li:hover {
    background-color: #AAA4A4;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 2px 3px 3px #352929;
    -webkit-box-shadow: 2px 3px 3px #352929;
    -moz-box-shadow: 2px 3px 3px #352929;
}
#nav li ul {
    margin: 0;
    padding: 0;
    display: none;
}
#nav li ul li {
    list-style-type: none;
    margin: 10px 0 0 0;
}
#nav li ul li a {
    display: block;
    padding: 5px 10px;
    color: #83FA03;
    text-decoration: none;
}
#nav li ul li:hover a {
    background-color: #606060;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 2px 2px #352929;
    -webkit-box-shadow: 1px 2px 2px #352929;
    -moz-box-shadow: 1px 2px 2px #352929;
}
#nav li span {
    cursor: pointer;
    margin: 0px 10px;
    font-weight: bold;
    color: #263348;
}

← Изучить детали

сделано с любовью: @dobrovoi