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; }
<!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
Curtir tópico
+ 0
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; }
<!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
Clique aqui para fazer login e interagir na Comunidade :)
