I am trying to create a website, but i'm having a strange problem wiht my submenu in nav bar as you can see in this picture: submenu problem
What i want is that my submenus elements have the same size, so i mean the same height.
This is my html part:
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
</div>
<div class="logo">
<img src="logo.png">
</div>
<div class="box">
<form>
<input type="text" name="" placeholder="Type...">
<input type="submit" name="" value="Search">
</form>
</div>
<nav>
<ul>
<li><a href="#"><span class="icon-home"></span>Acceuil</a></li>
<li><a href="#"><span class="icon-briefcase"></span>Cities</a></li>
<li class="tete">
<a href="#"><span class="icon-rocket"></span>Activites<span class="flash icon-circle-down"</a>
<ul class="sousmenu">
<li><a href="#">Venice</a></li>
<li><a href="#">Rome</a></li>
<li><a href="#">Pisa</a></li>
</ul>
</li>
<li><a href="#"><span class="icon-earth"></span>Services</a></li>
<li><a href="#"><span class="icon-envelop"></span>Contacter</a></li>
</ul>
</nav>
</header>
And this is CSS part for the submenu:
header nav ul li:hover .sousmenu {
display:block;}
header nav ul li .sousmenu {
display: none;
background:rgba(255, 0, 0, 0.2);
margin-left: 0px;
margin-top: 0px;
position: absolute;
width: 150%;
z-index:1000;}
header nav ul li .sousmenu li {
display:block;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.5); }
header nav ul li .sousmenu li a {
display: block;}
Can anyone help me plz? It's really urgent! Thanks!
Aucun commentaire:
Enregistrer un commentaire