Добрый день!
У меня еще один дурацкий вопрос (:
Необходимо зафиксировать сверху навигацию. Есть следующий код:
<div class="wrapper">
<div class="nav">
<ul class="menu">
<li><a href="">Menu</a>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#tarifs">Tarifs</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</li>
<ul>
</div>
</div>
И стили для него:
@import url("reset.css");
html,
body{
height: 100%;
}
.wrapper{
position: relative;
min-height: 100%;
width: 100%;
max-width: 320px;
margin: 0 auto;
font-size: 100%;
font-family: "Open Sans", sans-serif;
}
.nav{
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
background: #000 url("../images/logo.png") no-repeat 1.5em 1em;
line-height: 4em;
}
.nav ul li{
width: 100%;
}
.nav li ul{
display: none;
}
.nav .menu>li>a{
color: #49cbcd;
padding: 0.4em 1.563em;
font-size: 1.2em;
font-weight: bold;
text-align:center;
text-decoration: none;
}
.nav li ul li a{
display: block;
text-decoration: none;
color: #484c55;
text-align: center;
}
.nav li ul li a:hover{
color: #90dbdd;
border-bottom: 3px solid #49cbcd;
background: #f8f9fb;
}
.nav li:hover ul{
display: block;
}
В таком виде происходит следующее:
