Выдвижное меню с помощью css

Большинство людей (те которые не умеют делать такое меню), рыскают по всему интернету и пытаются найти сайт с таким меню. Потом начинают искать исходный код, чтобы понять как это делается. Я предлагаю вашему вниманию статью где будет показан пример самого просто меню. И так начнем..

Делаем структуру меню. Что будет главной ссылкой, а какие к нему приделанные. Вот моя:
<ul>
<li>Ссылки
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
</ul>
</li>
</ul>

• Ссылки
  • Ссылка 1
  • Ссылка 2

Со структорой разобрались, но это не то что вы хотели? Давайте для начала превратим их понастоящему в ссылки. Я думаю здесь затруднений не будет. Потому как, нет ничего проще чем добавить тег <a>. Все, ссылки есть, все есть. Осталось сделать выдвижное меню. Я привду пример на основе общего класса, т. е. не будет выделять личное имя. Я думаю вы сами с этим справитесь ;).

И так, вводим класс. Возмем к примеру dropnav. И теперь преобразовываем нашу структуру с сылками:
<ul id="dropnav">
<li><a href="https://bitby.net/news/vydvizhnoe-menyu-s-pomoschiyu-css/">Ссылки</a>
<ul>
<li><a href="https://bitby.net/#">Ссылка 1</a>
</li>
<li><a href="https://bitby.net/#">Ссылка 2</a>
</li>
</ul>
</li>
</ul>
Как видим, изменилась только первая строчка. Но в самом браузере (или где вы смотрите результат кода) ничего не изменилось. Дабавляем вот такой код в css:
#dropnav li {
float:left;
list-style:none;
}
После добаления, убралась только точка перед «Ссылки». Теперь преобразуем ссылки, для этого опять же (и в дальнейшем только туда) в классы прописываем код:
#dropnav li a {
display: block;
text-decoration: none;
padding: 4px 17px 4px 17px;
}
#dropnav li ul li a {
display: block;
text-decoration: none;
line-height:18px;
}
Вот и приобразовались наши ссылки, но результат все ровно не тот. Делаем дальше..

Прячем наши подссылки:
#dropnav li ul {
position: absolute;
left: -999px;
width:150px;
padding: 0;
background: #f0f0f0;
}
Задаем параметры вида наших подссылок:
#dropnav li li {
width: 150px;
overflow:hidden;
}
Параметры ссылок я думаю вы сами напишите с помощью вот такой вот строки:

#dropnav li li a {[свойство ссылок]}

Вот мы и подошли к финальной части. Делаем выдвиг подссылок. Для это вставляем код css:
#dropnav li:hover ul, #dropnav li li:hover ul, #dropnav li li li:hover ul, #dropnav li.sfhover ul, #dropnav li li.sfhover ul, #dropnav li li li.sfhover ul {
left:auto;
}
#dropnav li:hover, #dropnav li.sfhover {
background: #ddd;
}
Видимо вам надоели мои слова, которые я все вкручивал вам на уши. Смотрим весь код css:
#dropnav li {
float:left;
opacity:0.9;
}
#dropnav li a {
display: block;
text-decoration: none;
padding: 4px 17px 4px 17px;
}
#dropnav li ul li a {
display: block;
text-decoration: none;
line-height:18px;
}
#dropnav li ul {
position: absolute;
left: -999px;
width:150px;
padding: 0;
background: #f0f0f0;
}
#dropnav li li {
width: 150px;
overflow:hidden;
}
#dropnav li:hover ul, #dropnav li li:hover ul, #dropnav li li li:hover ul, #dropnav li.sfhover ul, #dropnav li li.sfhover ul, #dropnav li li li.sfhover ul {
left:auto;
}
#dropnav li:hover, #dropnav li.sfhover {
background: #ddd;
}
Вот вы и сделали выдвижное меню. Можно даже сказать не выдвижное, а раскрывающиеся ;). Графики я много не использовал. Ну да ладно..

Я привел пример с css, так как на JS  многие жалуются. Есть вопросы или заметили ошибку, пишите в комментариях.