Desloca Menu Para debaixo de Logo

07/06/2019

0

arquivo HTML:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylemenuprincipal1.css" />
</head>



<body>

<header>
<img src="imagens/logocvt1png.png" width="100" height="100" align="left" />

</header>
<nav>

<ul id="navegar">

<li><a href="#">Home</a></li>
<li><a href="#">Sobre Nós - SERVICEDESK</a></li>
<li><a href="#">ACI - DSLAN</a>
<ul>
<li><a href="#">Inserir</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Consultar</a></li>
<li><a href="#">Eliminar</a></li>
<li><a href="#">Linha de Comando</a></li>
</ul>
</li>
<li><a href="#">Configuração OLT Huawei</a></li>
<li><a href="#">IMS- Service System Portal</a></li>
<li><a href="#">Configuração remota dos HGW</a></li>
<li><a href="#">Portal Nossis</a></li>
<li><a href="#">PROVISÃO IPTV3.0</a></li>
<li><a href="#">Portal ITSM</a></li>
<li><a href="#">Terminal Server 83 </a></li>
<li><a href="#">Siebel </a></li>
<li><a href="#">FFO - Fiel operitiom</a>
<ul>
<li><a href="#">Inserir</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Consultar</a></li>
<li><a href="#">Eliminar</a></li>
</ul>
</li>
<li><a href="#">Tecnicos - DOM</a>
<ul>
<li><a href="#">Inserir</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Consultar</a></li>
<li><a href="#">Eliminar</a></li>
</ul>
</li>
<li><a href="#">Localidades</a>
<ul>
<li><a href="#">Inserir</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Consultar</a></li>
<li><a href="#">Eliminar</a></li>
</ul>
</li>

</ul>
</nav>

<aside>

</aside>
<section>

</section>
<footer>
</footer>


Arquivo: css

* { margin: 0; padding: 0; }
body { background: #f1f1f1; margin: 50px; }

#navegar { margin: 0; padding: 0; float: left; }
#navegar li { list-style: none; background: #fff; width: 250px; border-bottom: 1px solid #666; }
#navegar li a { display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; }
#navegar li a:hover { border-left: 4px solid #069; background: #f8f8f8; }
#navegar li ul { display: none; }
#navegar li:hover ul { display: block; }
#navegar li:hover ul li { background: #333; }
#navegar li:hover ul li a { color: #ccc; }
#navegar li:hover ul li a:hover { background: #222; border-left: 4px solid #900; }
Samora Evora

Samora Evora

Responder

Posts

07/06/2019

Rodolfo Gomes

arquivo HTML:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylemenuprincipal1.css" />
</head>



<body>

<header>
<img src="imagens/logocvt1png.png" width="100" height="100" align="left" />

</header>
<nav>

<ul id="navegar">

<li><a href="#">Home</a></li>
<li><a href="#">Sobre Nós - SERVICEDESK</a></li>
<li><a href="#">ACI - DSLAN</a>
<ul>
<li><a href="#">Inserir</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Consultar</a></li>
<li><a href="#">Eliminar</a></li>
<li><a href="#">Linha de Comando</a></li>
</ul>
</li>
<li><a href="#">Configuração OLT Huawei</a></li>
<li><a href="#">IMS- Service System Portal</a></li>
<li><a href="#">Configuração remota dos HGW</a></li>
<li><a href="#">Portal Nossis</a></li>
<li><a href="#">PROVISÃO IPTV3.0</a></li>
<li><a href="#">Portal ITSM</a></li>
<li><a href="#">Terminal Server 83 </a></li>
<li><a href="#">Siebel </a></li>
<li><a href="#">FFO - Fiel operitiom</a>
<ul>
<li><a href="#">Inserir</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Consultar</a></li>
<li><a href="#">Eliminar</a></li>
</ul>
</li>
<li><a href="#">Tecnicos - DOM</a>
<ul>
<li><a href="#">Inserir</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Consultar</a></li>
<li><a href="#">Eliminar</a></li>
</ul>
</li>
<li><a href="#">Localidades</a>
<ul>
<li><a href="#">Inserir</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Consultar</a></li>
<li><a href="#">Eliminar</a></li>
</ul>
</li>

</ul>
</nav>

<aside>

</aside>
<section>

</section>
<footer>
</footer>


Arquivo: css

* { margin: 0; padding: 0; }
body { background: #f1f1f1; margin: 50px; }

#navegar { margin: 0; padding: 0; float: left; }
#navegar li { list-style: none; background: #fff; width: 250px; border-bottom: 1px solid #666; }
#navegar li a { display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; }
#navegar li a:hover { border-left: 4px solid #069; background: #f8f8f8; }
#navegar li ul { display: none; }
#navegar li:hover ul { display: block; }
#navegar li:hover ul li { background: #333; }
#navegar li:hover ul li a { color: #ccc; }
#navegar li:hover ul li a:hover { background: #222; border-left: 4px solid #900; }


Samora, neste trecho de codigo abaixo remova esse estilo "align" e faça um teste se funcionará

 <img src="imagens/logocvt1png.png" width="100" height="100"  />


Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar