Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Srjeff

Problema com menu DropDown

Por , em Desenvolvimento frontend

Recommended Posts

Srjeff    0

Srjeff
Postado

Boa tarde,

 

Não entendo muito de css, basicamente sou iniciante, meu ramo é mais programação desktop, porém estou desenvolvendo uma aplicação em delphi que deve carregar uma pagina html, essa pagina é bem básica, e fica armazenada localmente na maquina, o menu funcionou perfeitamente nos browsers comuns, Chrome, FireFox, IE8 etc.. porém quando carrego ele no delphi, pelo componente webbrowser o menu não fica horizontal e sim vertical, já testei com outros sites, carregando eles pelo webbrowser e funcionaram, então eu acho que o problema é o meu código css.

 

Código CSS:

body {
   padding: 0;
   margin: 0;
   overflow-y: scroll;
   font-family: Arial;
   font-size: 14px;
}


#nav{
    background-color: #222;
}

#nav_wrapper{
      whidth: 960px;
      margin: 0 auto;
      text-align: left;
}

#nav ul{
     list-style-type: none;
     padding:0;
     margin: 0;
     position: relative;    
}

#nav ul li{
     display: inline-block;
}

#nav ul li:hover{
   background-color: #333;
}

#nav ul li a,visited{
     color: #ccc;
     display: block;
     padding: 15px;
     text-decoration: none;
}

#nav ul li a:hover{
    color: #ccc;
    text-decoration: none;
}

#nav ul li:hover ul{
    display: block;
}

#nav ul ul{
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    ;

}

#nav ul ul li{
    display: block;
}

#nav ul ul li a,visited{
     color:#ccc;
}

#nav ul ul li a:hover{
      color:#0033FF;
}

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>UNIDADE I - PARTE GERAL</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="nav">
   <div id="nav_wrapper">
        <ul>
              <li><a href="#">1 - SEGURIDADE SOCIAL</a>
			     <ul>
                    <li><a href="#">Conceito e fontes</a></li>
                    <li><a href="#">Histórico da proteção social</a></li>
                    <li><a href="#">Saúde</a></li>
					<li><a href="#">Assistência Social</a></li>
					<li><a href="#">Previdência Social</a></li>
                 </ul>
			  </li>
			  
			  <Li>
              <a href="#"> </a>
			      <ul>
                    <li><a href="#">Disposições Gerais</a></li>
                    <li><a href="#">Princípios Gerais</a></li>
                    <li><a href="#">Princípios Específicos</a></li>
                 </ul>
			  </li>
			  
			  <li>
              <a href="#">3 - REGIME GERAL</a>
			       <ul>
                    <li><a href="#">Regimes Previdenciários</a></li>
                    <li><a href="#">Finalidade e princípios básicos</a></li>
                    <li><a href="#">Inscrição e Filiação</a></li>
                    <li><a href="#">Prestações</a></li>
                 </ul>
			  </li>
			  
			  <li>
              <a href="#">4 - BENEFICIÁRIOS: SEGURADOS E DEPENDENTES </a>
			     <ul>
                    <li><a href="#">Beneficiários</a></li>
                    <li><a href="#">Segurados Obrigatórios</a></li>
                    <li><a href="#">Segurado Empregado</a></li>
                    <li><a href="#">Segurado Empregado Doméstico</a></li>
                    <li><a href="#">Segurado Contribuinte Individual</a></li>
                    <li><a href="#">Segurado Trabalhador Avulso</a></li>
                    <li><a href="#">Segurado Especial</a></li>
                    <li><a href="#">Segurado Facultativo</a></li>
                    <li><a href="#">Dependentes</a></li>
                 </ul>
			  </li>
        </ul>
  </div>

</div>

</br>
<hr />
<p>zdzxzxzxzxzxzxknjbvkdfnjnbndfbndfbndf</p>
<hr />
<p> </p>
</body>
</html>

Como deveria aparecer:

 

1 - SEGURIDADE SOCIAL | 2 - ORGANIZAÇÃO E PRINCÍPIOS | 3 - REGIME GERAL | 4 - BENEFICIÁRIOS: SEGURADOS E DEPENDENTES

 

 

Como aparece no webbrowser do delphi:

 

1 - SEGURIDADE SOCIAL

2 - ORGANIZAÇÃO E PRINCÍPIOS

3 - REGIME GERAL

4 - BENEFICIÁRIOS: SEGURADOS E DEPENDENTES

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Não sei nada de Delphi, mas vai que...

 

Vc tem uma <li> que está Ucase, não sei se isso poderia estar causando isso no Delphi.

<Li>

 <a href="#"> </a>
    <ul>
 <li><a href="#">Disposições Gerais</a></li>

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Srjeff    0

Srjeff
Postado

Não sei nada de Delphi, mas vai que...

 

você tem uma <li> que está Ucase, não sei se isso poderia estar causando isso no Delphi.

<Li>

 <a href="#"> </a>
    <ul>
 <li><a href="#">Disposições Gerais</a></li>

vlw

 

Infelizmente não é isso...

Segue link de como está aparecendo.

 

https://www.dropbox.com/sh/4nvt4qnxkrc01hy/AABe2BC8ozH4HrOYnoiBrJd2a?dl=0

Compartilhar este post

Link para o post
Compartilhar em outros sites

Electronic    124

Electronic
Postado

Tente mudar isso

trocar o display inline-block por float left em #nav ul li

e adicione o overflow auto em #nav

#nav ul li {
    float: left;
}
#nav {
    background-color: #222;
    overflow: auto;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Srjeff    0

Srjeff
Postado

 

Tente mudar isso

trocar o display inline-block por float left em #nav ul li

e adicione o overflow auto em #nav

#nav ul li {
    float: left;
}
#nav {
    background-color: #222;
    overflow: auto;
}

 

 

Funcionou com o float: left;, agora o único problema são os sob-itens que estão horizontal e devem ficar vertical.

 

vlw Eletronic ajudou bastante, resolveu 80% do problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Electronic    124

Electronic
Postado

O primeiro float afetou os sub itens

acesse o subitens e retire o float só deles

#nav ul ul li{
    display: block;
    float:none;
}

e retire o overflow auto que citei no ultimo post

 

se o menu ficar sem a cor de fundo adiocione isso

#nav:after{
    content:"";
    display:table;
    clear:both;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Srjeff    0

Srjeff
Postado

 

O primeiro float afetou os sub itens

acesse o subitens e retire o float só deles

#nav ul ul li{
    display: block;
    float:none;
}

e retire o overflow auto que citei no ultimo post

 

se o menu ficar sem a cor de fundo adiocione isso

#nav:after{
    content:"";
    display:table;
    clear:both;
}

 

 

Muito obrigado! Ficou perfeito. o fundo ficou branco mas deixando o overflow funcionou, fiz todas as modificações que vc falou mas deixei o overflow, ficou ótimo, vlw mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito