Centralizar MenuVertical Direito e Esquerdo HTML5 CSS3

HTML5

13/11/2018

Boa noite pessoal,
Estou tentando criar uma estrutura com dois menus verticais, mas não consigo, pois ao aplicar css3 um dos menus desce ou sobe,
nunca ficam na mesma linha. A estrutura exemplo está abaixo e código na sequencia: Desde já agradeço.

============================================
---------------- CABEÇALHO --------------------
=============================================
**--Link.1 - Link.2 - Link.3 -Link.4 -Link.5 -Link.6 -Link.7 --**
=============================================
|-Menu1.D-| |-Menu1.E-|
|-Menu2.D-| |-Menu2.E-|
|-Menu3.D-| |-Menu3.E-|
|-Menu4.D-| ------------------- |-Menu4.E-|
|-Menu5.D-| |**CORPO CENTRAL**| |-Menu5.E-|
|-Menu6.D-| | **DO SITE** | |-Menu6.E-|
|-Menu7.D-| ------------------- |-Menu7.E-|
|-Menu8.D-| |-Menu8.E-|
|-Menu9.D-| |-Menu9.E-|
|-Menu0.D-| |-Menu0.E-|
==============================================
---------------- RODAPE --------------------
==============================================

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>RSBB</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div id="paginaHome">
<header>
<img src="imagens/cabeca1.png">
<h1>Nome Site</h1>
<nav>
<ol>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
<li>Home6</li>
</ol>
</nav>
</header>
<section id="secao">
<div id="menuesquerdo">
<nav>
<ol>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ol>
</nav>
</div>
<div id="menudireito">
<nav>
<ol>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ol>
</nav>
</div>
</section>
</div>


</body>
</html>

======css3====
#paginaHome {
background-color:#778899;
width: 1200px;
margin: auto;
border: solid black 2px;

}


#paginaHome header {
width: 100%;
background-color: #778899;
height: 170px;
}

#paginaHome header img {
float: left;
margin-left: 10px;
margin-top: 10px;
}

#paginaHome header h1 {
text-align: center;
padding-top: 25px;
color: #F5FFFA;
height: 100px;
font-size: 35px;
font-weight: bold;
font-family: tahoma, arial;
}
#paginaHome header nav ol {
list-style-type: none;
text-align: center;
width:100%;

}

#paginaHome header nav ol li {
width: 150px;
display: inline-grid;
}
#secao {
background-color: #778899;
}

#menuesquerdo nav ol li {
list-style-type: none;
text-align: left;
width: 100%;
float: left;


}
#menudireito nav ol li {
list-style-type: none;
text-align: right;
width: 100%;
float: right;

}
Roni Barbosa

Roni Barbosa

Curtidas 0
POSTAR