Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá galera, eu recentemente solicitei um layout a um desing, e ficou legal, mas queri colocar o menu drop dow, pelo menos em um menu, porque eu preciso colocar mais 3 botões, mas não pode ser um do lado do outro, por isso a idéia do dropdow, vejam o meu menu e o style.css e se puderem ajudar e agradeço.
<!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=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/java.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="maskedinput.js"></script>
<script>
jQuery(function(){
jQuery("#data").mask("99/99/9999");
});
</script>
<title>Painel Administrativo - <?php echo $_SESSION['gestor_admin_nome']; ?></title>
</head>
<body>
<div id="box">
<div id="header">
<a href="home.php"><img src="imgs/SGA.png" alt="Inicio" align="SGA - Sistema Gerencial de Arquivo" title="SGA Sistema Gerencial de Arquivo" /></a>
<div id="menu">
<ul>
<li><a href="home.php" title="Home">Inicio</a></li>
<li><a href="cadastro.php" title="Cadastro">Cadastro</a></li>
<li><a href="pesquisar.php" title="Menus">Pesquisar</a></li>
<li ><a href="listarnomes.php" title="Artigos">Listar Nomes</a></li>
<li ><a href="contato.php" title="Contato">Contato</a></li>
</ul>
</div>
<div id="logout"><span>Olá <strong><a href="senha.php" title="Trocar Senha"><?php echo $_SESSION['gestor_admin_nome']; ?></a></strong>, Quero <a href="deslogado.php" title="Efetuar Logoff">Sair</a></span></div>
</div><!--Fecha div Header-->E o arquivo css que controla esse menu é esse:
.arredondado
{border:1px solid #0099cc;}
.h2_arredondado
{ background:#FF6600; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold; text-align:center; padding:5px 0; border-radius:10px 10px 0 0; margin:0;}
label.error { float: right; margin: 25px -220px 5px 0; border:1px solid #F00; background:#FFD9D9; color:#333333; width:230px; text-align:center; vertical-align:middle; font-size: 14px; padding:1px; }
/ ------------------BOX---------------------- /
#box
{ width:990px; margin:0 auto;z-index:0;}
/ ------------------HEADER---------------------- /
#header
{ width:990px; margin:0 auto; }
#header img
{ display:block; margin:10px auto 15px auto;}
#header #logo
{ display:block; text-align:center; font:36px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:10px auto;}
/ ------------------MENU---------------------- /
#menu a
{text-decoration:none;font-variant:small-caps;}
#header #menu ul
{list-style:none;margin:0;padding:0;z-index:10;}
#menu li ul
{display:none;}
#menu ul li
{float:left;position:relative;width:104px;border-radius: 10px;border-bottom-right-radius: 0;border-bottom-left-radius: 0; border:2px solid #0099cc; border-bottom:none; padding:4px 2px; display:block; background:#FFF;
}#menu ul li:hover ul li
{width:auto; border:none; padding:0; margin:0; border-radius:0; padding:4px 2px; }
#menu ul li ul li a
{font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal;}
#menu ul li ul li:hover
{ background:#FFFFFF; }
#menu ul li:hover ul li ul
{ width:auto; display: none; }
#menu ul li:hover ul li:hover ul
{display:block;position:absolute;margin-top:10; margin:0; padding:0;}
#menu ul li
{display:block;float:left;}
#menu ul li:hover ul
{display:block; position:absolute; top:26px; }
#menu ul li:hover ul li:hover ul
{display:block;position:absolute;left:109px;top:0px;border:2px solid #0099cc;margin-top:0;width:auto;padding:1px;white-space:nowrap;}
#menu ul li:hover ul li:hover ul li
{width:auto;display:block;padding:1px;}
#menu ul li:hover ul li:hover ul li a
{width:auto;padding:3px 2px;}
/ -----------------CONTENT---------------------- /
#header #logout
{ float:right; display:block; margin:5px 5px 0 0;}
#header #logout span
{ font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333;}
#header #logout span strong
{ font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#F60; font-weight:bold; }
#header #logout span a
{ font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#F60; font-weight:bold;}
#header #logout span a:hover
{ text-decoration:underline;}
/ -----------------CONTENT---------------------- /
#content
{ width:986px; border-top:2px solid #0099CC;border:2px solid #0099CC; border-radius:10px; background:#EAF2FF; float:left; margin:0 auto; }
#content h1
{ font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:15px auto; font-weight:bold; color:#333; display:block; text-align:center;}
/ ------------------HOME---------------------- /
#content #content_Home
{}
/ ------------------CADASTRO---------------------- /
#content #content_Cadastro
{}
#content #addCadastro
{ width:950px; display:block; margin:10px auto;}
#content #addCadastro form
{ width:928px; margin:5px auto; display:block;float:left;}
#content #addCadastro form #Header_Cadastro
{ width:928px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px;padding:0 10px;}
#content #addCadastro form #Title
{ float:left; display:inline;}
#content #addCadastro form #Title img
{ display:inline;vertical-align:middle; margin:5px 10px;}
#content #addCadastro form #Title h2
{ display:inline; vertical-align:middle; font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#ff9900; font-weight:bold;}
#content #addCadastro form #Options
{ float:right; margin:0 20px 0 0;}
#content #addCadastro form #Options #BTN_Salvar
{ width:33px; height:37px; background:url(imgs/BTN_Salvar.png) no-repeat; padding:0; margin:5px; float:left;}
#content #addCadastro form #Options #BTN_Salvar:hover
{ cursor:pointer;}
#content #addCadastro form #Options #BTN_Fechar
{ width:37px; height:36px;float:right; margin:5px;}
#content #addCadastro form #content_Cadastro
{ width:928px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px; padding:20px 10px;}
#content #addCadastro form #content_Cadastro table
{ width:550px; display:block; margin:0 auto;}
#content #addCadastro form #content_Cadastro span
{ font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; }
#content #addCadastro form #content_Cadastro table input
{ border-radius:5px; padding:0 2px; height:25px;}
#content #addCadastro form #content_Cadastro table input:focus
{ background:#DEF; border:1px solid #06C;}
#content #addCadastro form #content_Cadastro input.text
{ width:350px; border:1px solid #333;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;text-transform:uppercase; font-weight:bold; height:18px;}
/ ------------------PESQUISAR---------------------- /
#content #pesquisar
{ width:950px; display:block; margin:10px auto;}
#content #pesquisar form
{ width:928px; margin:5px auto; display:block;float:left;}
#content #pesquisar form #Header_pesquisar
{ width:928px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px;padding:0 10px;}
#content #pesquisar form #Title
{ float:left; display:inline;}
#content #pesquisar form #Title img
{ display:inline;vertical-align:middle; margin:5px 10px;}
#content #pesquisar form #Title h2
{ display:inline; vertical-align:middle; font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#ff9900; font-weight:bold;}
#content #pesquisar form #Options
{ float:right; margin:5px 20px 0 0;}
#content #pesquisar form #content_pesquisar
{ width:928px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px; padding:10px 10px;}
#content #pesquisar form #content_pesquisar label
{ display:block; width:528px; margin:0 auto 5px auto;}
#content #pesquisar form #content_pesquisar span
{ display:inline-block; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; width:250px; }
#content #pesquisar form #content_pesquisar input
{border-radius:5px; height:25px; padding:0 2px;}
#content #pesquisar form #content_pesquisar input.text:focus
{ background:#DEF; border:1px solid #06C; }
#content #pesquisar form #content_pesquisar input.text
{ width:250px; border:1px solid #333; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;text-transform:uppercase; font-weight:bold; height:18px; margin: 0 0 0 20px;}
#content #pesquisar form #content_pesquisar input#BTN_Pesquisar
{width:100px; display:inline-block; text-align:center; margin:0 auto; border:1px solid #06C; background:#09C; color:#FFF;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; padding-bottom:2px; font-weight:bold;}
#content #pesquisar form #content_pesquisar input#BTN_Pesquisar:hover
{ background:#FF6600;}
#content #pesquisar form #content_pesquisar input#BTN_Limpar
{width:100px; display:inline-block; text-align:center; margin:0 auto; border:1px solid #06C; background:#09C; color:#FFF;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; padding-bottom:2px; font-weight:bold;}
#content #pesquisar form #content_pesquisar input#BTN_Limpar:hover
{ background:#FF6600;}
/ ------------------Resposta PESQUISAR---------------------- /
#content #res_pesquisar
{ width:950px; display:block; margin:10px auto;}
#content #res_pesquisar form
{ width:928px; margin:5px auto; display:block;float:left;}
#content #res_pesquisar form #Header_pesquisar
{ width:928px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px;padding:0 10px;}
#content #res_pesquisar form #Title
{ float:left; display:inline;}
#content #res_pesquisar form #Title img
{ display:inline;vertical-align:middle; margin:5px 10px;}
#content #res_pesquisar form #Title h2
{ display:inline; vertical-align:middle; font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#ff9900; font-weight:bold;}
#content #res_pesquisar form #Options
{ float:right; margin:5px 20px 0 0;}
#content #res_pesquisar form #Options #BTN_Fechar
{ display:inline-block; float:right; margin:0;}
#content #res_pesquisar form #Options #BTN_Search
{ display:inline-block; float:left; margin:1px 6px 0 0;}
#content #res_pesquisar form #content_pesquisar
{ width:928px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px; padding:10px 10px;}
#content #res_pesquisar form #content_pesquisar hr
{ height:1px;}
#content #res_pesquisar form #content_pesquisar h2
{ text-align:center;}
#content #res_pesquisar form #content_pesquisar h2 strong
{ color:#0066FF;}
#content #res_pesquisar form #content_pesquisar #content_Table
{ width:898px; display:block; margin:5px auto; border:1px solid #09F;}
#content #res_pesquisar form #content_pesquisar .Header_Table
{ display:block; background:#C4E8FF;height:44px;}
#content #res_pesquisar form #content_pesquisar .Header_Table div
{ display:inline-table; font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; vertical-align:middle; text-transform:uppercase; }
#content #res_pesquisar form #content_pesquisar .Header_Table div.Table_Nome
{ width:595px; text-align:left; }
#content #res_pesquisar form #content_pesquisar .Header_Table div.Table_Data
{ width:100px;}
#content #res_pesquisar form #content_pesquisar .Header_Table div.Table_Box
{ width:90px;}
#content #res_pesquisar form #content_pesquisar .Header_Table div.Table_Sexo
{ width:100px;}
#content #res_pesquisar form #content_pesquisar .Content_Table
{ display:block; border-top:1px solid #09f;}
#content #res_pesquisar form #content_pesquisar .Content_Table:hover
{ background:#DFF4FF;}
#content #res_pesquisar form #content_pesquisar .Content_Table div
{ display:inline-table; font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; text-align:center; vertical-align:middle; text-transform:uppercase; }
#content #res_pesquisar form #content_pesquisar .Content_Table div.Table_Nome
{ width:595px; text-align:left; }
#content #res_pesquisar form #content_pesquisar .Content_Table div.Table_Data
{ width:100px;}
#content #res_pesquisar form #content_pesquisar .Content_Table div.Table_Box
{ width:90px;}
#content #res_pesquisar form #content_pesquisar .Content_Table div.Table_Sexo
{ width:100px;}
#content #res_pesquisar form #content_pesquisar #paginator
{ width:898px; display:block; margin:5px auto; text-align:center; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#0066FF;}
#content #res_pesquisar form #content_pesquisar #paginator span
{ margin:0 5px 0 5px; text-align:center; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#0066FF;}
#content #res_pesquisar form #content_pesquisar #paginator a
{ margin:0 5px 0 5px; text-align:center; font:15px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; color:#F60;}
/ ------------------LISTAR---------------------- /
#content #listarnomes
{ width:950px; display:block; margin:10px auto;}
#content #listarnomes form
{ width:933px; margin:5px auto; display:block;float:left;}
#content #listarnomes form #Header_listarnomes
{ width:933px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px;padding:0 5px;}
#content #listarnomes form #Title
{ float:left; display:inline;}
#content #listarnomes form #Title img
{ display:inline;vertical-align:middle; margin:5px 10px;}
#content #listarnomes form #Title h2
{ display:inline; vertical-align:middle; font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#ff9900; font-weight:bold;}
#content #listarnomes form #Options
{ float:right; margin:5px 20px 0 0;}
#content #listarnomes form #content_listarnomes
{ width:933px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px; padding:10px 5px;}
#content #listarnomes form #content_listarnomes hr
{ height:1px;}
#content #listarnomes form #content_listarnomes h2
{ text-align:center;}
#content #listarnomes form #content_listarnomes h2 strong
{ color:#0066FF;}
#content #listarnomes form #content_listarnomes #content_Table
{ width:928px; display:block; margin:5px auto; border:1px solid #09F;}
#content #listarnomes form #content_listarnomes .Header_Table
{ display:block; background:#C4E8FF;height:45px;}
#content #listarnomes form #content_listarnomes .Header_Table div
{ display:inline-table; font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; vertical-align:middle; text-transform:uppercase; }
#content #listarnomes form #content_listarnomes .Header_Table div.Table_ID
{ width:50px; }
#content #listarnomes form #content_listarnomes .Header_Table div.Table_Nome
{ width:355px; text-align:left; }
#content #listarnomes form #content_listarnomes .Header_Table div.Table_Data
{ width:100px;}
#content #listarnomes form #content_listarnomes .Header_Table div.Table_Box
{ width:90px;}
#content #listarnomes form #content_listarnomes .Header_Table div.Table_Sexo
{ width:90px;}
#content #listarnomes form #content_listarnomes .Header_Table div.Table_Reg
{ width:130px;}
#content #listarnomes form #content_listarnomes .Header_Table div.Table_Opcoes
{ width:80px;}
#content #listarnomes form #content_listarnomes .Content_Table
{ display:block; border-top:1px solid #09f;}
#content #listarnomes form #content_listarnomes .Content_Table:hover
{ background:#DFF4FF;}
#content #listarnomes form #content_listarnomes .Content_Table div
{ display:inline-table; font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; text-align:center; vertical-align:middle; text-transform:uppercase; }
#content #listarnomes form #content_listarnomes .Content_Table div.Table_ID
{ width:50px; }
#content #listarnomes form #content_listarnomes .Content_Table div.Table_Nome
{ width:355px; text-align:left; }
#content #listarnomes form #content_listarnomes .Content_Table div.Table_Data
{ width:100px;}
#content #listarnomes form #content_listarnomes .Content_Table div.Table_Box
{ width:90px;}
#content #listarnomes form #content_listarnomes .Content_Table div.Table_Sexo
{ width:90px;}
#content #listarnomes form #content_listarnomes .Content_Table div.Table_Reg
{ width:130px;}
#content #listarnomes form #content_listarnomes .Content_Table div.Table_Opcoes
{ width:80px;}
#content #listarnomes form #content_listarnomes #paginator
{ width:898px; display:block; margin:5px auto; text-align:center; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#0066FF;}
#content #listarnomes form #content_listarnomes #paginator span
{ margin:0 5px 0 5px; text-align:center; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#0066FF;}
#content #listarnomes form #content_listarnomes #paginator a
{ margin:0 5px 0 5px; text-align:center; font:15px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; color:#F60;}
/ ------------------Contato---------------------- /
#content #contato
{ width:950px; display:block; margin:10px auto;}
#content #contato form
{ width:928px; margin:5px auto; display:block;float:left;}
#content #contato form #Header_contato
{ width:928px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px;padding:0 10px;}
#content #contato form #Title
{ float:left; display:inline;}
#content #contato form #Title img
{ display:inline;vertical-align:middle; margin:5px 10px;}
#content #contato form #Title h2
{ display:inline; vertical-align:middle; font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#ff9900; font-weight:bold;}
#content #contato form #Options
{ float:right; margin:5px 20px 0 0;}
#content #contato form #content_contato
{ width:928px; border:1px solid #333; margin:5px auto; display:block; background:#fff; float:left; border-radius:10px; padding:10px 10px;}
#content #contato form #content_contato #left
{ width:500px; float:left;}
#content #contato form #content_contato #left label
{ display:block; width:328px; margin:0 auto 5px auto;}
#content #contato form #content_contato #left label span
{ display:block; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; text-align:left; }
#content #contato form #content_contato #left span
{ display:block; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; text-align:center; }
#content #contato form #content_contato #left label input
{border-radius:5px; padding:0 2px;}
#content #contato form #content_contato #left label input:focus
{background:#DEF; border:1px solid #06C;}
#content #contato form #content_contato #left label textarea
{border:1px solid #333; width:305px;}
#content #contato form #content_contato #left label textarea:focus
{background:#DEF; border:1px solid #06C;}
#content #contato form #content_contato #left input.text
{ width:300px; border:1px solid #333; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;text-transform:uppercase; font-weight:bold; height:18px;}
#content #contato form #content_contato #left input#BTN_Enviar
{width:200px; display:block; margin:0 auto; border:1px solid #06C; background:#09C; color:#FFF; vertical-align:middle;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; padding-bottom:2px; font-weight:bold;}
#content #contato form #content_contato #left input#BTN_Enviar:hover
{ background:#FF6600;}
#content #contato form #content_contato #right
{ width:400px; height:300px; float:right; border:1px solid #333; background:#E5E5E5;}
/ ------------------Rodapé---------------------- /
#Rodape
{ width:990px; margin:0 auto; }
#Rodape #copy
{ float:left; margin:10px 0 10px 365px;}
#Rodape #copy span
{Display:block; text-align:center; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#333;}
#Rodape a
{ float:right; margin:15px 50px 10px 0;}
/ ------------------BOX---------------------- /
Esse mesmo css não consegue também colocar o rodapé sempre embaixo.
Mas enfim, qualquer ajuda é bem vindo.
Carregando comentários...