Hola a todos de nuevo, sigo intentando hacer el maldito menu y estoy teniendo problemas para colocar las dos listas de menu dropdown, en especial colocar el icono un poco mas a la derecha (no se como darle espacio) y que se vea parecido a lo de la foto.
asi es como lo tengo
http://prntscr.com/7sha53
asi es como deberia estar
http://prntscr.com/7sh76e
mi codigo es el siguiente;
Código HTML:
<div class="container16">
<div class="row">
<div class="column8" id="dropdownNav">
<ul class="menu">
<li><a href="#tipo">ЛЮБОГО ТИПА <i class="fa fa-angle-down"></i></a>
<ul>
<li><a href="#compacta">КОМПАКТ-КАМЕРА</a></li>
<li><a href="#sinEspejo">БЕЗЗЕРКАЛЬНАЯ</a></li>
<li><a href="#espejo">ЗЕРКАЛЬНАЯ</a></li>
<li><a href="#medioFormato">СРЕДНЕФОРМАТНАЯ</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li><a href="#marca">ЛЮБОГО БРЕНДА</a>
<ul>
<li><a href="#canon">CANON</a></li>
<li><a href="#nikon">NIKON</a></li>
<li><a href="#sony">SONY</a></li>
<li><a href="#fujifilm">FUJIFILM</a></li>
<li><a href="#samsung">SAMSUNG</a></li>
<li><a href="#olympus">OLYMPUS</a></li>
<li><a href="#panasonic">PANASONIC</a></li>
<li><a href="#polaroid">POLAROID</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
y el css esta asi;
Código HTML:
nav,
nav ul,
nav li,
nav a{
margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
nav li{
position: relative;
padding-left: 10px;
list-style: none;
float: left;
display: block;
height: 40px;
}
nav li a{
display: block;
padding-top: 20px;
margin-bottom: 6px;
text-decoration: none;
}
.menu li {
position: relative;
padding-left: 10px;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 30px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border: 1px solid #393942;
}
.menu ul{
display: none;
}