sistema operacional deixar as opções do menu lado a lado

[SonikPlay 5]

Como o próprio tópico já diz :/

 

[spoiler=css]

*{margin: 0; padding: 0;}

 

.menu{

list-style:none;

border:1px solid #c0c0c0;

font-family: arial, helvetica, sans-serif;

}

 

.menu li{

border-right:1px solid #c0c0c0;

}

 

.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

 

.menu li a:hover{

background:Orange;

color:#fff;

-moz-box-shadow:0 3px 10px 0 #CCC;

-webkit-box-shadow:0 3px 10px 0 #ccc;

text-shadow:0px 0px 5px #fff;

}

 

.menu li ul{

position:auto;

background-color:#fff;

display:none;

}

 

.menu li:hover ul, .menu li.over ul{display:block;}

 

.menu li ul li{

border:1px solid #c0c0c0;

display:block;

width:150px;

}

 

 

 

[spoiler=HTML]

<header>

<center><a href="inicial.html"><img src="layer.png"></a><br><br></center>

<center><nav>

<ul class="menu">

<li><a href="#">INÍCIO</a></li>

<li><a href="#">PROPOSTA PEDAGÓGICA</a></li>

<li><a href="#">CURSOS</a></li>

<li><a href="#">HORÁRIOS</a></li>

<li><a href="#">HISTÓRIA DA ESCOLA</a></li>

<li><a href="#">CONTATO</a></li>

<li><a href="#">ESTÁGIOS</a></li>

<li><a href="#">ALUNOS</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">SEO</a></li>

<li><a href="#">Design</a></li>

</ul>

</li>

<li><a href="#">PROFESSORES</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">SEO</a></li>

<li><a href="#">Design</a></li>

</ul>

</li>

</ul>

</nav></center>

</header>

 

 

[FioDuMaLL 24]

Não sei se entendi bem a sua pergunta.

O que entendi foi o seguinte, tu tem um menu na vertical (link em baixo de link) e tu quer por na horizontal (link na frente do outro)

Caso for isso basta add no css

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[SonikPlay 5]

Não sei se entendi bem a sua pergunta.

O que entendi foi o seguinte, tu tem um menu na vertical (link em baixo de link) e tu quer por na horizontal (link na frente do outro)

Caso for isso basta add no css

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

pois então, quando eu tento adicionar esse display: inline;

ele fica assim

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[FioDuMaLL 24]

Passou despercebido aqui.

Em seu css ta setando display block nos link, só tirar.

ficando assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[Juliana~* 26]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

CSS

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Use float left para colocar duas listas, uma ao lado da outra

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Não se esqueçaa que:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

A ultima div none estará sujeito ao float, e pelo motivo de no mesmo não estar o float left ira bugar as propriedades do elemento em questão.

 

Use:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

OU

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se