Pesquisar na Comunidade
Mostrando resultados para as tags ''menu drop-down''.
Encontrado 1 registro
-
Sou inciante em CSS, e criei um menu drop-down baseado em um tutorial que assisti no youtube, obtive um resultado satisfatório. Mas eu gostaria que os items Categorias e Contato ficassem com cores diferentes do item Home. Segue meu código HTML <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="codecss7.css"> </head> <body> <p id="tit"> Mundo Quimica </p> <nav class="menu"> <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> Categorias </a> <ul> <li> <a href="#"> Quimica Geral </a> </li> <li> <a href="#"> Quimica Inorganica </a> </li> <li> <a href="#"> Quimica Organica </a> </li> <li> <a href="#"> Fisico Quimica </a> </li> <li> <a href="#"> Bioquimica </a> </li> </ul> </li> <li> <a href="#"> Contato </a> <ul> <li> <a href="#"> Nos Siga </a> </li> <li> <a href="#"> Telefones </a> </li> <li> <a href="#"> Video Aulas </a> </li> </ul> </li> </ul> </nav> </body> </html> Meu código CSS: * { margin: 0; padding: 0; } .menu { width: 100%; height: 50px; background-color: #FF4500; font-family: Impact; font-size: 20px; letter-spacing: 2px; margin-top: 20px; } .menu ul { position: relative; list-style: none; } .menu ul li { width: 33.3%; float: left; background-color: #B22222; } .menu a { padding: 15px; display: block; text-decoration: none; color: #FFFFFF; background-color: #FF4500; text-align: center; } .menu ul ul { width: 100%; height: 100px; position: absolute; display: none; } .menu ul li:hover ul { display: block; } .menu a:hover { text-transform: uppercase; background-color: #000000; } .menu ul ul li { float: none; border-bottom: 2px solid #FFFF00; } .menu ul ul li a { background-color: #D2691E; } #tit { font-family: "MV Boli"; font-weight: bold; color: #000000; font-size: 40px; letter-spacing: 10px; margin-left:500px; } body { background-image: url(bckg3.jpg); background-size: 100%; } Desde já agradeço.
