Главная » Вебмастеру » Простое горизонтальное выпадающее меню на CSS

Простое горизонтальное выпадающее меню на CSS

2017-10-16 / Вр:22:36 / просмотров: 3598

Еще один код, который поможет вам быстро создать на сайте меню без особых трудностей.
Вам только нужно будет заменить ссылки в меню и названия.
Меню горизонтальное, но не адаптивное, написано на CSS.

Теперь сам код:

CSS:

*, *:before, *:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}

nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
}
nav ul{
list-style: none;
position: relative;
float: right;
margin-right: 100px;
display: inline-table;
}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

nav ul li:hover{background: rgba(0,0,0,.15);}
nav ul li:hover > ul{display: block;}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li a{
display: block;
padding: 30px 20px;
color: #222;
font-size: .9em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul{
display: none;
background: #fff;
position: absolute;
top: 100%;
box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
}
nav ul ul li{float: none; position: relative;}
nav ul ul li a {
padding: 15px 30px;
border-bottom: 1px solid rgba(0,0,0,.05);
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}

HTML:

<nav role='navigation'>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a>
<ul>
<li><a href="#">Кто мы такие</a></li>
<li><a href="#">Наши работы</a></li>
</ul>
</li>
<li><a href="#">Для клиента</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>