Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> #wrap{ width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #444444; } .navbar{ height: 50px; padding: 0; margin: 0; position: absolute; } .navbar li{ height: auto; width: 135.8px; float: left; text-align: center; list-style: none; font: normal bold 13px/1em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #444444; } .navbar a{ padding: 18px 0; border-left: 1px solid #ccc9c9; text-decoration: none; color: white; display: block; } .navbar li:hover, a:hover { background-color: #444444; } .navbar li ul{ display: none; height: auto; margin: 0; padding: 0; } .navbar li:hover ul{ display: block; } .navbar li ul li { background-color: #444444; } .navbar li ul li a{ border-left: 1px solid #444444; border-right: 1px solid #444444; border-top: 1px solid #c9d4d8; border-bottom: 1px solid #444444; } .navbar li ul li a:hover{ background-color: #a3a1a1; } </style> </head> <body> <h2>Создайте модальное окно</h2> <div id="wrap"> <ul class="navbar"> <li> <a href="#">Главная страница</a> </li> <li> <a href="#">Учебники</a> <ul> <li><a href="#">Изучите HTML</a></li> <li><a href="#">Изучите CSS</a></li> <li><a href="#">Изучите JavaScript</a></li> <li> <a href="#">Изучите PHP</a> </li> </ul> </li> <li> <a href="#">Тесты</a> <ul> <li><a href="#" >Основы CSS</a></li> <li><a href="#">Основы PHP</a></li> <li><a href="#">Основы JavaScript</a></li> </ul> </li> <li> <a href="#">Инструменты</a> <ul> <li><a href="#">Геометрические изображения</a></li> <li><a href="#">Color Picker</a></li> <li><a href="#">Генератор паролей</a></li> <li><a href="#">HTML редактор</a></li> <li> <a href="#">Base 64</a> </li> </ul> </li> <li> <a href="#">Сниппеты</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">Angular</a></li> <li> <a href="#">Java</a> </li> </ul> </li> <li> <a href="#">String Functions</a> <ul> <li><a href="#">Реверс строки</a></li> <li><a href="#">URL кодер</a></li> <li><a href="#">Удаление пустых строк</a></li> <li><a href="#">Подсчет слов в строке</a></li> </ul> </li> </ul> </div> </body> </html>