vendredi 4 mai 2018

Submenu size in navigation bar HTML CSS

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