Align navigation menu in the center

Asked

Viewed 233 times

3

I am trying to align the "drop" menu in the center. Help?

THE HTML:

<main id="conteudo">
    <section id="produto" class="box">

        <nav id="drop">
            <ul>
                <li><a href="">Linha Automotiva</a></li>
                    <ul>
                        <li><a href="">Lanterna traseira</a></li>
                        <li><a href="">Sinalizador lateral</a></li>

                    </ul>
                <li><a href="">Linha perfil</a></li>
                <li><a href="">Linha multiuso</a></li>
                <li><a href="">Linha suporte</a></li>
                <li><a href="">Linha residencial</a></li> 
            </ul>
        </nav>
        <div id="foto-p">
            <p>Sinaleiras</p>
            <img src="../img/SMA0802.png">
        </div>
        <div id="foto-p">
            <p>Sinaleira lateral</p>
            <img src="../img/LR1108A.png">
        </div>
        <div id="foto-p">
            <p>Multiuso</p>
            <img src="../img/M12W.PNG">
        </div>
        <div id="foto-p">
            <p>Luminárias</p>
            <img src="">
        </div>

    </section>
</main>

THE CSS:

.box{
clear: left;
position: relative;
max-width: 80%;
min-width: 767px;
min-height: 400px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
text-align: center;
}

#drop{
    margin-top:0px;
    display: inline-block;
    width: 100%;
}

#drop ul{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#drop ul a{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
}

#drop ul li{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#drop ul li.current-menu-item{
    background:#ddd;
}

#drop ul li:hover{
    background:#f6f6f6;
}

#drop ul ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
}

#drop ul ul li{
    float:none;
    width:200px;
}

#drop ul ul a{
    line-height:120%;
    padding:10px 15px;
}

#drop ul ul ul{
    top:0;
    left:100%;
}

#drop ul li:hover + ul{
    display:block;
}

#drop ul li + ul:hover{
    display: block;
}
html css html5 css3 responsive-layout

2 answers

0

  • I’m sorry, but I had the wrong code, but I’ve already edited it. As you can see, there are some div’s there, and if you auto, they end up going up.

  • Right here with the div works normal with auto.

  • Then it must be something in the rest of the code. Vlw

0

You say the full navigation menu or when the mouse has Hover in the menu in specific? .

First of all you will have to leave these three elements with id="photo-p", commented, or erase them for now.( There is already a comment here that using id for more than one element is not a good practice and may result in some problems with both css and Javascript, the recommended is to use a class). Second, we’re going to use a dislay:flex, to be more dynamic and without magic numbers, and you’ve styled the Section instead of the drop, so it becomes:

.box box{

 display: flex;
 justify-content: space-around;

}

#drop{

margin-top:0px;
clear: left;
position: relative;
max-width: auto; /*melhor deixar o width por enquanto com auto*/
min-height: auto;
background-color: blue; /*mudei a cor para você poder "enxergar"o elemento*/
border-radius: 5px;
text-align: center;

} I hope I helped you, look for Flexbox, help a lot with layout development.

Browser other questions tagged html css html5 css3 responsive-layout

You are not signed in. Login or sign up in order to post.