Menu com Sub menu CSS

28 de maio de 2012 2 respostas

Mr.Enxame 28 de maio de 2012

Opa pessoal eu tou com um problema na hora de colocar e ajustar sub menus no meu codigo css e nao estou conseguindo inseir os sub menus para amostrarem de acordo com o que eu quero por favor me ajuda deem uma olhada no codigo para min e se poderem me ajudar agradeceria!

<-------- codigo CSS --------->

{
	margin:0;
	padding:0;
}
body{
	font:14px Georgia, "Times New Roman", Times, serif;
}
ul{
	list-style-type:none;
}
ul#menuSub{
	width:600px;
	margin:0 auto;
}
ul#menuSub li{
	position:relative;
	float:left;
}
ul#menuSub li a{
	display:block;
	float:left;
	padding:0 15px;
	height:30px;
	line-height:30px;
	background:#033;
	color:#FFF;
	text-decoration:none;
}

ul#menuSub li a:hover{
	background:#CCC;
	color:#000;
}

ul#menuSub li ul {
	display:none;
	position:absolute;
	top:30px;
	left:0;
}

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

ul#menuSub li ul a{
	width:130px;
	border-bottom:1px solid #FFF;
}

<-------Codigo HTML-------->

<html>
<head>
<title>menuSub</title>
<link href="MenuSub.css" rel="stylesheet" type="text/css">
</head>

<body>

<ul id="menuSub">
	<li><a href="#">Home</a></li>
	<li><a href="#">Cursos</a></li>
		<ul>
			<li><a href="#">Informatica</a></li>
			<li><a href="#">Enfermagem</a></li>
			<li><a href="#">Vestuario</a></li>
			<li><a href="#">Hospedagem</a></li>
		</ul>
		<li><a href="#">Projetos</a></li>
		<li><a href="#">Historia</a></li>
		<li><a href="#">NossaEquipe</a></li>
</ul>
		


</body>
</html>

2 Respostas

andre.froes 29 de mai. de 2012

Não sou muito bomd e CSS não, mas por meio deste artigo cosnegui fazer algo parecido com o que você quer criar (creio eu).
Esse é o exemplo recriado com o seus itens de menu:

&lt;html&gt;  
&lt;head&gt;  
&lt;title&gt;menuSub&lt;/title&gt;  
&lt;style type="text/css"&gt;
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	color: #666;
	background-color: #fff;
	margin-left: 20px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}

a, a:hover, a:active, a:focus {
	outline:0;
	direction:ltr;
}

.wrapper {
	position:relative; height:25px;
}

.mainmenu {
	position:absolute;
	z-index:100;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:normal;
	font-size:90%;
	line-height:25px;
	left:50%;
	margin-left:-303px;
	width:606px;
}

ul.menu {
	padding:0;
	margin:0;
	list-style:none;
	width:100px;
	overflow:hidden;
	float:left;
	margin-right:1px;
}

ul.menu a {
	background:#369;
	text-decoration:none;
	color:#fff;
	padding-left:5px;
}

ul.menu li.list {
	float:left;
	width:250px;
	margin:-32767px -125px 0px 0px;
	background:#033;
}

ul.menu li.list a.category {
	position:relative;
	z-index:50;
	display:block;
	float:left;
	width:120px;
	margin-top:32767px;
	background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
	margin-right:1px;
	background-image:url(images/tophover1.png);
	background-repeat:no-repeat;
	background-position:left top;

}

ul.submenu {
	float:left;
	padding:25px 0px 0px 0px;
	margin:0;
	list-style:none;
	background-image:url(images/tophover1.png);
	background-repeat:no-repeat;
	background-position:left top;
	margin:-25px 0px 0px 0px;
}

ul.submenu li a {
	float:left;
	width:120px;
	background:#369;
	clear:left;
	color:#fff;
}

ul.submenu li a.endlist {
	background:#033;
}

ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
	background:#033;
}

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
	background:#900;
	margin-right:1px;
	color:#fff;
}

&lt;/style&gt;
&lt;/head&gt;  
  
&lt;body&gt;  
  
&lt;div class="wrapper"&gt;

    &lt;div class="mainmenu"&gt;
        <ul >
        <li ><a  >Home</a></li>
        </ul>
        <ul >
            <li >
                <a  >Cursos</a>
                <ul >
                    <li><a >Informatica</a></li>
                    <li><a >Enfermagem</a></li>
                    <li><a >Vestuario</a></li>
                    <li><a >Hospedagem</a></li>
                </ul>
            </li>
        </ul>
        <ul >
            <li ><a  >Projetos</a></li>
        </ul>
        <ul >
            <li ><a  >Historia</a></li>
        </ul>
        <ul >
            <li ><a  >NossaEquipe</a></li>
        </ul>
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;  
&lt;/html&gt;

dlsilva1812 29 de mai. de 2012

Bom dia

Acredito que neste site vc irá sanar suas dúvidas: www.maujor.com

Têm muitos exemplos.

Boa sorte
Diego Silva

Criado 28 de maio de 2012

Ultima resposta 29 de mai. de 2012

Respostas 2

Participantes 3

2 Respostas

Topicos relacionados