I'm trying to create a page with a navigation bar that has dropdown submenus. Unfortunately, something keeps going wrong: hovering over an option makes the submenu show up over the bar and list the submenu options horizontally.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Toy CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
/* -------------------------MAIN-MENU----------------------- */
#topmenu ul {
margin-left: 0; /* clears default margins */
padding-left: 0; /* clears default padding */
background-color: #036;
color: white;
float: left;
width: 100%; /* creates complete bar */
font-family: arial, helvetica, sans-serif;
}
#topmenu li {
display: inline;
}
/* ----------------------MAIN-MENU-LINKS-------------------- */
#topmenu a {
padding: 3px 10px;
}
#topmenu a:link, #topmenu a:visited {
padding: 0.2em 1em;
background-color: #036;
color: white;
float: left;
border-right: 1px solid #fff;
text-decoration: none; /* removes link underlining */
}
#topmenu a:hover {
color: #fff;
background-color: #369;
}
/* --------------------------SUBMENU------------------------ */
#topmenu li ul {
display: none;
background-color: #69f;
}
#topmenu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#topmenu li:hover li {
float: none;
}
#topmenu li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#topmenu li li a:hover {
background-color: #8db3ff;
}
/* -------------------------------------------------------------------------------- */
.mainbox {
border: 2px solid black;
float: left;
margin: 10px 0px 0px 0px;
min-height: 500px;
padding: 20px;
width: 600px;
}
.mainbox ul li {
width: 500px;
}
.mainbox {
display: none;
}
</style>
</head>
<script>
$(function() {
$('#topmenu li a').click(function(e) {
e.preventDefault();
var tabContent = this.hash;
$(tabContent).show().siblings('.mainbox').hide()
});
});
</script>
<body>
<!-----------–-–-–-–--------TOP-MENU-------------------------->
<div id="topmenu">
<ul>
<li>
Option A
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
<li>A5</li>
</ul>
</li>
<li>
Option B
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
<li>B4</li>
</ul>
</li>
<li>
Option C
</li>
</ul>
</div>
<!-----------–-–-–-–---------OPTIONS-------------------------->
<div id="optiona" class="mainbox">
<h2>Option A</h2>
<p>You've selected Option A. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="optionb" class="mainbox">
<h2>Option B</h2>
<p>You've selected Option B. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="optionc" class="mainbox">
<h2>Option C</h2>
<p>You've selected Option C. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
Thanks so much for your help!
#topmenu ul li {
display: list-item;;
}
#topmenu ul li ul {
margin-top:25px !important;
}
Should do the trick...
See it in action
that root of the problem is that
#topmenu li {
display: inline;
}
is cascading, so that the submenu <li/>s are also inline. you should correct it with something like
#topmenu li li {
display: block;
}
and go from there :)
Related
why Increased Height item Contact when hover on it? how fix it?
This is My code :
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
See This Image :
When you hover over the list items - you're adding an arrow to the anchor tag via generated content.
Thant's what's causing the increase in height.
To fix this - just set position:absolute on the generated content.
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
position:absolute;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Because of
#nav > li:hover > a:after {
content: '\25BE';
}
the height (font size) is to high of this content.
maybe you should try a background-img.
Or position it absolute and the a-tag relative.
Its because of the :after content attribute (#nav > li:hover > a:after) you are adding on hover(the small arrow icon)
To avoid this, applying line-height: 0 is an efficient way of doing it.
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
line-height: 0; //fix
}
Also you have this code twice, make sure you remove the redundant one.
It simple line height issue.
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
line-height: 20px;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
I'm new to this - sorry if this is a silly problem. When I hover over the dropdown menu options, the submenu appears, but the background of the submenu has a width of 100%, like the main menu. How can I alter it so that the submenu has a width only of, say, the tab it originates from?
Also, apologies for messy coding. I was playing around with jquery so there are some unnecessary tags in there...
Here is the CSS code:
#menu {
float:left;
width:100%;
background-color:#f23918;
overflow:hidden;
position:relative;
}
#menu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #ffffff;
white-space: nowrap;
background-color: #f23918;
text-align: center;
padding: 10px;
text-transform: uppercase;
}
ul li a:hover {
background: #f29c18;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li { /*Controls dropdowns*/
float: none;
font-size: 11px;
}
li:hover a { background: #f23918;
}
li:hover li a:hover
{
background: #f29c18;
}
and Here is the HTML code:
<div id="menu">
<ul id="navbar">
<li class="active"><span>Home</span></li>
<li class="has-sub"><span>Alpaca Wool Products</span>
<ul class="submenu">
<li><span>Fur Hats</span></li>
<li><span>Capes</span></li>
<li><span>Ponchos</span></li>
<li><span>Shawls</span></li>
<li class="last"><span>Scarves</span></li>
</ul>
</li>
<li class="has-sub"><span>Home Décor</span>
<ul class="submenu">
<li><span>Rugs</span></li>
<li><span>Tapestries</span></li>
<li><span>Throws</span></li>
<li><span>Upholstery</span></li>
<li class="last"><span>Teddy Bears</span></li>
</ul>
</li>
<li><span>About Us</span></li>
<li class="last"><span>Artisans</span></li>
</ul>
</div>
Ok. Here a workout. There might better solution exists.
First you need to give a fixed height to div#menu. Also I dont think you need a float there. Remove overflow hidden and position relative.
#menu {
width:100%;
background-color:#f23918;
height: 38px;
}
Then for submenu add following
li ul {
display: none;
min-width: 100%;
white-space: nowrap;
}
Last solution actually credited to https://stackoverflow.com/a/13775531/2120162
Here you can find how it looks. https://jsfiddle.net/theprog/3h8wpx97/1/
Update: Fixed moving part. Thanks #dowomenfart
li ul {
display: none;
min-width: 100%;
white-space: nowrap;
position:absolute !important;
z-index: 100;
}
Rather than tweaking your code I rewrote a simplified version based on what you need.
$(document).ready(function () {
$("#navbar > li").mouseover(function () {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$(this).mouseout(function () {
$(this).removeClass("active");
});
}
});
});
#navbar {
background: #f23918;
padding: 0;
margin: 0;
font-size: 0; /*fix inline block gap*/
}
#navbar > li {
font-size: 16px;
list-style: none;
position: relative;
display: inline-block;
padding: 0;
margin: 0;
}
#navbar > li > a {
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 10px;
display: block;
color: #fff;
}
#navbar > li > a:hover,
#navbar > li.active > a,
#navbar > li > ul {
background: #f29c18;
}
#navbar > li > ul {
display: none;
white-space: nowrap;
padding: 0 0 5px;
margin: 0;
position: absolute;
left: 0;
top: 36px;
}
#navbar > li > ul > li {
display: block;
margin: 10px 20px;
padding: 0;
}
#navbar > li > ul > li > a {
color: #fff;
}
#navbar > li:hover > ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="navbar">
<li>
Item A
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item B
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li class="active">
Item C
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item D NoSub
</li>
</ul>
Under my view menu, I am attempting to create a new submenu within a submenu without any sucess. How can the existing CSS code be modified such that the submenu2 under the view menu behaves and looks like all my other sub menus?
Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#menu_container {
width: 100%;
background: rgb(250,252,254);
border: 1px solid rgb(128,128,128);
font-family: Arial;
font-size: 9pt;
}
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
ul#menu li a{
display: block;
text-decoration: none;
padding: 7px 14px;
float:none;
color: rgb(51,51,51);
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:left;
border: 1px solid rgb(128,128,128);
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: rgb(230,240,254);
color: #000;
}
ul#menu li:hover li a {
background: rgb(250,252,254);
color: rgb(51,51,51);
}
ul#menu li:hover li a:hover {
background: rgb(230,240,254);
color: #000;
}
</style>
</head>
<body>
<div id="menu_container">
<ul id="menu">
<li>File
<ul class="submenu">
<li>Close</li>
</ul>
</li>
<li>Edit
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>View
<ul class="submenu">
<li>Submenu 1</li>
<ul><li>Submenu 2</li></ul>
<li>Submenu 2</li>
</ul>
</li>
<li>Logoff</li>
</ul>
</div>
</body>
</html>
You need to make a few changes:
On Html place the "subsubmenu" inside the li and give it the classname submenu :
<li>
Submenu 1
<ul class="submenu">
<li>SubSubmenu 2</li>
</ul>
</li>
And on CSS this:
Show only direct children submenu for each li not all submenus with >
ul#menu li:hover > ul.submenu{
....
}
Make new selector for subsubmenu
ul.submenu li:hover > ul.submenu{
display: block;
position:absolute;
left:100%;
top:0;
border: 1px solid rgb(128,128,128);
}
The demo http://jsfiddle.net/mK7qS/7/
i'm learning the basic of CSS and trying to create a dropdown menu, i tried creating a dropdown menu using plain CSS, but it's not working.
So far I tried this code:
CSS
<!-- because of the * default code it takes out all margin and padding or idententation -->
*{
margin: 0px;
padding: 0px;}
body
{
font-family: verdana;
background-color: ABC;
padding: 50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*rules for navigation menu */
/*============================================*/
ul#navmenu, ul.sub1
{
list-style-type: none;<!-- sets bullets to none -->
}
ul#navmenu li
{
outline: 1px solid red;
width: 125px;
text- align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a
{
text-decoration: none;
display: block; <!-- this code makes the link a button instead pointing specifically on the link -->
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li
{
}
ul#navmenu .sub1 a
{
margin-top: 0px;
}
ul#navmenu li:hover > a
{
background-color: #CFC; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu li:hover a: hover
{
background-color: #FF0; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu ul.sub1
{
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1
{
display: block;
}
HTML
<h1>Navigation Menu</h1>
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2</li>
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
</body>
</html>
The dropdown menu is not working, it's not hiding the sub menus, i don't know why.
Here is the picture screenshot using Internet Explorer:
IE
While using Google Chrome:
Chrome
I can't move on:( Any suggestion why dropdown menu is not working and why it's showing differently using other browsers?
Is there a way on how to code CSS dropdown menu where it will show the same on any browser? Thanks in advance.
JSFIDDLE
screen capture:
Use correct HTML buddy:
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
And, add this CSS:
li ul{
display:none;
}
li:hover ul{
display:block;
}
Like this
please put ul in submenu
DEMO
HTML
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
CSS
*{
margin: 0px;
padding: 0px;}
body
{
font-family: verdana;
background-color: ABC;
padding: 50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*rules for navigation menu */
/*============================================*/
ul#navmenu, ul.sub1
{
list-style-type: none;<!-- sets bullets to none -->
}
ul#navmenu li
{
width: 125px;
text- align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a
{
text-decoration: none;
display: block; <!-- this code makes the link a button instead pointing specifically on the link -->
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li
{
}
ul#navmenu .sub1 a
{
margin-top: 0px;
}
ul#navmenu li:hover > a
{
background-color: #CFC; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu li:hover a: hover
{
background-color: #FF0; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu ul.sub1
{
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1
{
display: block;
}
li ul{
display:none;
}
li:hover ul{
display:block;
}
DEMO2
DEMO3
You need to do three things..
1.Correction in HTML, Where there is 'li' tag with child 'ul'with id="sub1".You need to write it as
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
// there was a typo mistake.You close 'li' before the 'ul'. It should be closed in the end.
You need to display:none for sub1 menu.
li ul{
display:none;
}
Then show it when you hover that 'li'
li:hover ul{
display:block;
}
EDITED :Write this in style tag....
*{
margin: 0px;
padding: 0px;}
body
{
font-family: verdana;
background-color: ABC;
padding: 50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*rules for navigation menu */
/*============================================*/
ul
{
list-style-type: none;<!-- sets bullets to none -->
}
ul#navmenu li
{
width: 125px;
text- align: center;
float: left;
margin-right: 4px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu a
{
text-decoration: none;
display: block; <!-- this code makes the link a button instead pointing specifically on the link -->
width: 125px;
line-height: 25px;
}
ul#navmenu li:hover > a
{
background-color: #CFC;
}
li ul{
display:none;
left: -40px;
position: relative;
}
li:hover ul{
display:block;
}
ul#sub1 li:hover{
background-color:red;
}
TRY IT
Your html is wrong use, ul#sub1 should be child of <li>
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
You have to put the ul tag in Sub Menu.
<ul id="navmenu">
<li>Hyperlink 1</li>
<li>Hyperlink 2
<ul id="sub1">
<li>Hyperlink 2.1</li>
<li>Hyperlink 2.2</li>
</ul>
</li>
<li>Hyperlink 3</li>
<li>Hyperlink 4</li>
</ul>
*{
margin: 0px;
padding: 0px;}
body
{
font-family: verdana;
background-color: ABC;
padding: 50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*rules for navigation menu */
/*============================================*/
ul#navmenu, ul.sub1
{
list-style-type: none;<!-- sets bullets to none -->
}
ul#navmenu li
{
width: 125px;
text- align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a
{
text-decoration: none;
display: block; <!-- this code makes the link a button instead pointing specifically on the link -->
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li
{
}
ul#navmenu .sub1 a
{
margin-top: 0px;
}
ul#navmenu li:hover > a
{
background-color: #CFC; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu li:hover a: hover
{
background-color: #FF0; <!-- sets all link color when hovering to yellow -->
}
ul#navmenu ul.sub1
{
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1
{
display: block;
}
li ul{
display:none;
}
li:hover ul{
display:block;
}
Try This it will surely work...
I have a really simple menu that I'd like to add a drop-down. What do I need to do to add a drop down in here to one of the items?
http://www.cozinhatur.com/teste1/
HTML
<div class="menu">
<div class="search">
<form id="form1" name="form1" method="post" action="">
<label><span>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Pesquisar..." />
</span>
<input name="b" type="image" src="images/search.gif" class="button" />
</label>
</form>
</div>
<ul>
<li>HOME</li>
<li>QUEM SOMOS</li>
<li>COZINHAS</li>
<li>DIVERSOS</li>
<li>PRODUTOS</li>
<li>CONTACTOS</li>
</ul>
<div class="clr"></div>
</div>
CSS
.menu
{
background:#5d5d5d;
margin:0 auto;
padding:0;
width:942px;
}
.menu ul
{
border:0;
float:left;
list-style:none;
margin:0;
padding:0;
text-align:left;
}
.menu ul li
{
border:0;
float:left;
margin:0;
padding:0 5px 0 0;
}
.menu ul li a
{
color:#fff;
float:left;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:11px;
margin:0;
padding:15px;
text-decoration:none;
}
.menu ul li a:hover
{
background:#b57800;
}
.menu ul li a.active
{
background:#1caedd;
}
.menu ul li ul,.menu ul li ul a
{
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:11px;
}
Have made a simple CSS drop down from your menu. See jsFiddle Demo. Hover over the second and third menu items to see the drop down.
Hoping this will help you to further build to suit your needs.
The code changes....
HTML
<div class="menu">
<ul>
<li>HOME</li>
<li>QUEM SOMOS
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>COZINHAS
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</li>
<li>DIVERSOS</li>
<li>PRODUTOS</li>
<li>CONTACTOS</li>
</ul>
</div>
CSS
.menu {
background:#5d5d5d;
margin:0 auto;
padding:0;
width:942px;
}
ul {
border:0;
float:left;
list-style:none;
margin:0;
padding:0;
text-align:left;
}
ul li {
display: block;
position: relative;
float: left;
border:0;
float:left;
margin:0;
padding:0 5px 0 0;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #5d5d5d;
margin: 0px;
white-space: nowrap;
}
ul li a.active
{
background:#1caedd;
}
ul li a:hover {
background: #b57800;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #5d5d5d;
}
li:hover li a:hover {
background: #b57800;
}
There is a good example here. The main point is when hovered show the sub menu.
http://www.red-team-design.com/css3-dropdown-menu
see this is pure css based dropdown menu:-
HTML
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
see the demo:- http://jsfiddle.net/XPE3w/140/