Duvida com Menu em Html e Css.

[Cassia Reis]

Olá amigos, boa noite.

Tenho uma dúvida. Comecei a trabalhar neste menu e quero que o submenu fique à direita do menu. Quando eu clicasse no menu, aparecesse o submenu do lado dele, mas não está dando certo, será que teria como alguém me ajudar?

<div id="menu">

		<ul>

			<li><a href=""><b>Cadastrar</b></a>
				<ul>
					<li><a href="">Livro</a></li>
					<li><a href="">Usuário</a></li>
					<li><a href="">Funcionário</a></li>


				</ul>
			</li>


			<li><a href=""><b>Consulta</b>

				<ul>


				     <li><a href="">Livro</a></li>
				     <li><a href="">Usuário</a></li>
				     <li><a href="">Funcionário</a></li>

				</ul>


			</li>


	</ul>	

#menu {
 	position: relative;
	margin-top:0;
	cursor:pointer;
 }
 #menu ul {
    padding:0px;
    margin:0px;
    float: justify;
    width: 100%;
    background-color:#EDEDED;
    list-style:none;
}

#menu ul li { display: inline; }

#menu ul li a {
    padding: 6px 18px;
    float:left;
    /* visual do link */
    background-color:#EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;
}

#menu ul li a:hover {
    background-color:#D6D6D6;
    color: #6D6D6D;
    border-bottom:3px solid #EA0000;
}

Aí está o meu código, se alguém puder me ajudar, eu agradeço.

Beijos.

[r4uny]

Olá cassia,

Primeiramente encontrei alguns erros no seu codigo, ficou faltando fechar a div#menu e a tag <a> de consulta.

Alterei o seu codigo, veja se é isso que você quer:

<div id="menu">

	<ul>

		<li><a href=""><b>Cadastrar</b></a>
			<ul>
				<li><a href="">Livro</a></li>
				<li><a href="">Usuário</a></li>
				<li><a href="">Funcionário</a></li>


			</ul>
		</li>

		<li><a href=""><b>Consulta</b></a>

			<ul>

		                <li><a href="">Livro</a></li>
				<li><a href="">Usuário</a></li>
				<li><a href="">Funcionário</a></li>

			</ul>

		</li>

	</ul>
</div>

#menu {
	position: relative;
	margin-top:0;
	cursor:pointer;
}
#menu ul {
	padding:0px;
	margin:0px;
	float: justify;
	width: 100%;
	background-color:#EDEDED;
	list-style:none;
}

#menu ul li { display: inline; }

#menu ul li a {
	padding: 6px 18px;
	float:left;
	 /* visual do link */
	background-color:#EDEDED;
	color: #333;
	text-decoration: none;
	border-bottom:3px solid #EDEDED;
}

#menu ul li a:hover{
	background-color:#D6D6D6;
	color: #6D6D6D;
	border-bottom:3px solid #EA0000;
	display: block;
}

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

#menu ul li ul{
	display: none;
}

Dessa maneira funcionou corretamente, mas não com o clique e sim com o hover, caso você queira que o abra no clique, teria que usar javascript para isso, seria algo como:

<div id="menu">

		<ul>

			<li><a href=""><b>Cadastrar</b></a>
                               <!--Adicionei a class .sub-menu para saber com qual elemento irei mexer no javascrit-->
				<ul class="sub-menu">
					<li><a href="">Livro</a></li>
					<li><a href="">Usuário</a></li>
					<li><a href="">Funcionário</a></li>


				</ul>
			</li>


			<li><a href=""><b>Consulta</b></a>
				<!--Adicionei a class .sub-menu para saber com qual elemento irei mexer no javascrit-->
				<ul class="sub-menu">


				     <li><a href="">Livro</a></li>
				     <li><a href="">Usuário</a></li>
				     <li><a href="">Funcionário</a></li>

				</ul>


			</li>


	</ul>
</div>

$(document).ready(function(){
	$('#menu ul li a').click(function(){
		$(this).next('.sub-menu').toggle();

		return false;
	})
})

Lembrando que para isso funcionar voce terá que adicionar a biblioteca jquery ao seu codigo.