Exemplos de Menus

>>>Home
Contact Us Sitemap Search

Exemplos de Menus

Para o exemplo acima (de uma só aba)

     <div id="oNav">
         <span> <a href="/oosa/contact_us.html">Contact Us</a></span>
         <span> <a href="/oosa/sitemap.html">Sitemap</a></span>
         <span> <a href="/oosa/search.html">Search</a></span>
      </div>
 
Na folha de Estilo:
    #oNav {
        height: 30px;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 14px;
        text-align: right;
        padding-top: 5px;
        padding-right: 20px;
        background-color:#39f;
        background-image: linear-gradient(to bottom, #def, #036);
        text-shadow: 10px 10px 0px 0px;
        margin-right:15px;
        border-radius: 1px 30px 30px 1px;
        box-shadow: 2px 2px 6px #000; /*6px representa o borrão*/
        }

    #div {
      display: block;
    }

    #oNav > span > a {
       color: #000;/*36f; cor da fonte da aba*/
}



No Html:
 <!DOCTYPE html>
 <html lang="pt-BR">

<head>
<meta charset="UTF-8"/>
<meta name="description" content="Menu CSS"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Menu CSS  </title>
<link rel= "stylesheet" type= "text/css" href="/static/css/style_menu.css" media="all" / >

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script >
     <script >
	 $(document).ready(function() {
	   $("#menu li ul").hide();
	   $("#menu li").hover(
	       function(){$(this).children("ul").show();},
	       function(){$(this).children("ul").hide();}
	    );   
	 });
     </script >
</head> 

<body>
<h1>Exemplos de Menus</h1>
<ul id="menu">
<li>Home
<ul>
<li>Educação</li>>
 <li>Governo</li>
 <li>Energia
	<ul>
	   <li>Elétrica</li>
	    <li>Eólica</li>
	    <li>Hidráulica</li>
	    <li>Fóssil</li>
	    <li>Solar</li>
	</ul>
 </li>
</ul>

<li>Home
<ul>
<li>Educação</li>>
 <li>Governo</li>
 <li>Energia
	<ul>
	   <li>Elétrica</li>
	    <li>Eólica</li>
	    <li>Hidráulica</li>
	    <li>Fóssil</li>
	    <li>Solar</li>
	</ul>
  </li>
</ul>
<li>cultura
<ul>
   <li>Educação</li>>
     <li>Governo</li>
     <li>Energia
	 <ul>
	       <li>Elétrica</li>
		<li>Eólica</li>
		<li>Hidráulica</li>
		<li>Fóssil</li>
		<li>Solar</li>
	    </ul>
     </li>
</ul>
<li>Case
<ul>
   <li>Educação</li>>
     <li>Governo</li>
     <li>Energia
	    <ul>
	       <li>Elétrica</li>
		<li>Eólica</li>
		<li>Hidráulica</li>
		<li>Fóssil</li>
		<li>Solar</li>
	    </ul>
     </li>
</ul>
<li>Indústrias
 <ul>
   <li>Educação</li>>
     <li>Governo</li>
     <li>Energia
	    <ul>
	       <li>Elétrica</li>
		<li>Eólica</li>
		<li>Hidráulica</li>
		<li>Fóssil</li>
		<li>Solar</li>
	    </ul>
       </li>
  </ul>
</li>

  Na folha de Estilo:
   /*Documento style_menu.css*/
 {
  margin:0;
  padding:0;
}

body{
     background-color: #000000;
     background: beige url(/static/img/faixa-preta-azul.jpg);
     /*background: url(/static/img/bg-body.gif);*/
     /*box-shadow: 50px 60px 60px 50px #000000;*/
     background-repeat: repeat-x;
     margin-top: 10px;
 }
 #container{ 
    border: 1px dotted #000;
    width:860px;
    margin:0 auto;
    margin-top: 100px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #FFFFFF;
}

h1, h2{
text-align: center;
}

 ul#menu > li {
	  float:left;
	  }

 ul#menu >li > ul{
	 left:0;
	 top: 27px;
	 }

ul{
     padding:0; 
     margin:0;
     list-style:none; 
     }

li{
     border: 1px solid black;
     width:120px;
     padding:3px;
     text-align: center;
     position:relative;
     list-style:none;/*retira a marcação de lista do submenu*/
     }

 li:hover{
	  background-color: black;/* cor de fundo*/
	  color: white; /* cor da fonte branca para ser visível em fundo preto*/
	  }

li > ul{ /*submenu*/
   position:absolute;
   left:126px;
   top:0;
   color:black;
   list-style:none;/*retira a marcação de lista do submenu*/
}