I have 3 drop-down menus under nav, and I want to align them left, middle, and right. The left and right alignment are working using float, but I'm having difficulty to align a drop-down menu to the middle. Please see the css selector
.inline-menu.middle-menu at https://jsfiddle.net/xv51vkc7/.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="css/theme_1.css">
</head>
<body>
<nav>
<ul class="inline-menu left-menu">
<li>Left-A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Left-B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
<ul class="inline-menu middle-menu">
<li>Middle-A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Middle-B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
<ul class="inline-menu right-menu">
<li>Right-A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Right-B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
body{
background-color: #eee;
padding: 0;
}
.inline-menu,
.inline-menu ul{
list-style: none;
padding: 0;
margin: 0;
}
.inline-menu > li{
display: inline-block;
padding-right: 25px;
background-color: yellow;
position: relative;
}
.inline-menu a{
text-decoration: none;
}
.inline-menu > li > ul{
display: none;
position: absolute;
background-color: green;
}
.inline-menu > li:hover > ul{
display: block;
width: 100%; /* same width as parent */
}
.inline-menu.left-menu{
float: left;
}
.inline-menu.right-menu{
float: right;
}
.inline-menu.middle-menu{
}
Flexbox can do that:
body {
background-color: #eee;
padding: 0;
}
nav {
display: flex;
justify-content: space-between;
}
.inline-menu,
.inline-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.inline-menu > li {
display: inline-block;
padding-right: 25px;
background-color: yellow;
position: relative;
}
.inline-menu a {
text-decoration: none;
}
.inline-menu > li > ul {
display: none;
position: absolute;
background-color: green;
}
.inline-menu > li:hover > ul {
display: block;
width: 100%;
/* same width as parent */
}
.inline-menu.left-menu {
float: left;
}
.inline-menu.right-menu {
float: right;
}
.inline-menu.middle-menu {
float: left;
}
<nav>
<ul class="inline-menu left-menu">
<li>Left-A
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
<li>Left-B
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
</ul>
<ul class="inline-menu middle-menu">
<li>Middle-A
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
<li>Middle-B
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
</ul>
<ul class="inline-menu right-menu">
<li>Right-A
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
<li>Right-B
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
</ul>
</nav>
Related
guys i have dynamic navbar . submenu will be availbe if menu have submenu. i want open submenu under related menu which is hovered and want keep submenu visible to select their item.
with this code submenu will show always at that css style position and menu will disapear when my mouse move to it... how can i solve this issue?
this is my navbar :
<nav>
<div class="nav-wrapper grey darken-3">
<ul class="right hide-on-med-and-down second-nav">
<li *ngFor="let cat of categories">
<a (mouseover)="hover($event, cat)" (mouseleave)="unhover($event)" class="dropdown-button" >{{ cat.title }}</a>
</li>
</ul>
</div>
</nav>
<!-- Dropdown -->
<div *ngIf="hoveredCategory" class="content">
<ul id="hoveredCategory" class="collection">
<li class="collection-item avatar" *ngFor="let sc of hoveredCategory.sub">
<span>
{{ sc }}
</span>
</li>
</ul>
</div>
mycss :
.content {
background-color: #FFFFFF;
margin: 0;
width: 300px;
position: absolute;
right: 0;
min-width: 300px;
max-height: inherit;
margin-left: -1px;
overflow: hidden;
white-space: nowrap;
z-index: 1;
}
hover and unhover :
hover(event, category) {
this.hoveredCategory = category;
}
unhover(event) {
this.hoveredCategory = null;
}
.navigation ul,.navigation li{
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.navigation li{
background:rgba(0,0,0,0.3);
position: relative;
}
.navigation li a {
padding: 15px;
display:block;
text-decoration:none;
}
.navigation ul ul{
display: none;
position: absolute;
top: 100%;
left: 0;
}
.navigation li:hover ul{
display: block;
}
<div class="navigation">
<ul>
<li>
Menu Item
<ul>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
Try this one.
I want to use only css, no javascript. When I mouse hover the top-level menu I can display the submenu, but as soon as I unhover the top-level menu the submenu disapper. How could I solve this without using javascript? Have I missed something?
I tried to use .has-children:hover + .sub-menu {display: block;} to display the submenu when I mouse hover the top-level menu, but I have no idea what I can code to keep visible the submenu.
The HTML code is:
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover + .sub-menu {
display: block;
}
<header class="header">
<ul class="menu">
<li>Work</li>
<li>
<a class="has-children" href="#about">Haschildren</a>
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li>
<a class="has-children" href="#careers">About</a>
<ul class="sub-menu">
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>end</li>
</ul>
</header>
Add the class has-children to the li and use the li's hover event to display the submenu.
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover .sub-menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<header class="header">
<ul class="menu">
<li>Work
</li>
<li class="has-children">Haschildren
<ul class="sub-menu">
<li>Child 1
</li>
<li>Child 2
</li>
<li>Child 3
</li>
</ul>
</li>
<li>Careers
</li>
<li class="has-children">About
<ul class="sub-menu">
<li>Child 3
</li>
<li>Child 4
</li>
</ul>
</li>
<li>end
</li>
</ul>
</header>
</body>
</html>
Move you has-children class onto the li and then make your selector:
.has-children:hover > .sub-menu
Updated snippet:
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover > .sub-menu {
display: block;
}
<header class="header">
<ul class="menu">
<li>Work</li>
<li class="has-children">
Haschildren
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li class="has-children">
About
<ul class="sub-menu">
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>end</li>
</ul>
</header>
There is a menu :
<div id="divmenuppal"> // this the menu
<ul class="dropdown">
<li class="menuppal">Administration
<ul>
<li>Artificial Turf</li>
<li>
Batting Cages
<ul>
<li>Indoor
<ul>
<li>Garden</li>
</ul>
</li>
<li>Outdoor</li>
</ul>
</li>
<li>Benches & Bleachers</li>
<li>Communication Devices</li>
<li>Dugouts</li>
<li>Fencing & Windscreen</li>
<li><hr></li>
<li>Floor Protectors</li>
<li>Foul Poles</li>
<li>Netting</li>
<li>Outdoor Furniture</li>
<li>Outdoor Signs</li>
<li><hr></li>
<li>Padding</li>
<li>Scoreboards</li>
<li>Shade Structures</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Structure
<ul>
<li>All-in-One Team Cart</li>
<li>Air & Electrical Reels</li>
<li>Field Drags</li>
<li>
Field Marking Equipment
<ul>
<li>Batter's Box Templates</li>
<li>Dryline Markers</li>
<li>Field Paint
<ul>
<li>Garden</li>
</ul>
</li>
<li>Field Sprayers</li>
<li>Stencils</li>
</ul>
</li>
<li>
Field Tarps
<ul>
<li>Area Tarps</li>
<li>Growth Covers / Protectors</li>
<li>Infield Tarps</li>
<li>Tarp Accessories</li>
</ul>
</li>
<li>Hand Tools</li>
<li>
Irrigation, Hoses, Nozzles
<ul>
<li>Hoses & Hose Reels</li>
<li>Irrigation</li>
<li>Nozzles</li>
</ul>
</li>
<li>Layout Tools</li>
<li>Moisture Removal</li>
<li><hr></li>
<li>Mound Fortification</li>
<li>Mowers & Stripers</li>
<li>Soil Management</li>
<li>Soil Amendments</li>
<li>Spreaders & Sweepers</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Exercice
<ul>
<li>
Baseball - Softball
<ul>
<li>Base Accessories</li>
<li>Bases & Home Plates</li>
<li>Game Accessories</li>
<li>Pitching Rubbers</li>
</ul>
</li>
<li>
Batting Practice Equipment
<ul>
<li>Backstops</li>
<li>Infield Screens</li>
<li>Jugs Pitching Machines</li>
<li>Turf Mats</li>
<li>Turf Protectors</li>
<li>Replacement Accessories</li>
</ul>
</li>
<li>
Batting Cages
<ul>
<li>Indoor</li>
<li>Outdoor</li>
</ul>
</li>
<li>
Portable Mounds
<ul>
<li>Batting Practice Mounds</li>
<li>Game Mounds</li>
<li>Practice Mounds</li>
</ul>
</li>
<li>
Football
<ul>
<li>First Down Markers</li>
<li>Football Accessories</li>
<li>Football Goalposts</li>
</ul>
</li>
<li>
Soccer
<ul>
<li>Soccer Goals</li>
<li>Soccer Accessories</li>
</ul>
</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Contribuables et biens
<ul>
<li>Ladders & Sticks</li>
<li>Hurdles</li>
<li>Training Accessories</li>
<li>Smart-Cart Training System</li>
<li>Smart-Hurdle Collection</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Recettes
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Edition
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Outils
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
</ul>
</div>
<div class="breadcrumbs" style="clear:left;"> // this is the breadcrumbs
<div class="container-fluid">
<ul class="bread">
<li>Accueil</li><li>Gestion des contribuables</li><li><a>Fiche d'un contribuable</a></li>
</ul>
<ul class="bread pull-right">
<li style="color: #000;padding: 5px;font-size: 11px;font-weight: bold;">Fiche d'un contribuable</li>
</ul>
</div>
</div>
The css of the menu :
* {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a {
text-decoration: none;
font-size: 11px;
font-weight: 100;
width: 100%;
box-sizing: border-box;
}
ul {
list-style: none;
}
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
background-color: #40617C;
}
ul.dropdown li:not(.menuppal):not(:first-child):not(:last-child)
{
margin-top: 8px;
margin-bottom: 8px;
}
hr {
margin-left: 6px;
margin-right: 8px;
border-top: 0;
}
/*
LEVEL ONE : MAIN MENU
*/
ul.dropdown {
position: relative;
}
ul.dropdown li.menuppal {
float: left;
zoom: 1;
background: #000 url(../images/menuLight.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-left: 1px solid #222;
}
ul.dropdown li.menuppal a {
display: block;
padding: 4px 8px;
color: #000000;
}
/* Doesn't work in IE */
ul.dropdown li.menuppal:hover {
background: #ccc url('../images/menuDark.png') repeat-x 50% 50%;
position: relative;
}
/*
FIN LEVEL ONE
*/
/*
LEVEL TWO
*/
ul.dropdown ul {
top: 100%;
left: 0;
}
ul.dropdown ul li {
float: none;
position: relative;
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown li.menuppal ul li a {
border-right: none;
color: #FFF;
display: inline-block;
}
ul.dropdown li.menuppal ul li a:hover {
background: #07243a;
}
ul.dropdown li.menuppal ul li a:visited {
word-break: break-all;
}
/*
LEVEL THREE
*/
ul.dropdown ul ul {
left: 100%;
top:0!important;
}
/*
LEVEL FOUR
*/
ul.dropdown ul ul ul {
left: 100%;
top:0!important;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
At runtime the menu is not occupying all the horizontal space :
So how to make the menu fill the remaining space like in this image :
ul.dropdown {
background: #000 url(../images/menuLight.png) repeat-x top left;
}
Use flex layout. I add following code to the bottom of your CSS and it did the trick:
#divmenuppal > .dropdown {
display: flex;
}
.dropdown .menuppal:last-child {
flex-grow: 1;
}
http://jsfiddle.net/w2n79nsy/
ok I found it from #SunilDalal's answer :
ul.dropdown {
position: relative;
float: left;
width: 100%;
background: #000 url('menuLight.png') repeat-x top left;
}
I am trying to lessen the vertical space between items in the submenu of my drop down navigation bar. You can see what it currently looks like at http://www.mirandabee.com
I am trying to reduce the space vertically, but can't figure it out.
Here is my HTML for it:
<ul id ="nav">
<li><a href="http://www.mirandabee.com/search/label/About%20Me#.UuQfD-Io6Rs">About Me
<ul>
<li>About Me</li>
<li>Photo Album</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Blog%20Series#.UuPc3uIo6Rs1">Blog Series
<ul>
<li>Guest Post Monday</li>
<li>Infographic Monday</li>
<li>What I Wore Wednesday</li>
<li>Fun Friday Link Party</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Freebies#.UhDj0D92XiM">Freebies
<ul>
<li>Giveaways</li>
<li>Printables</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Recipes#.UuPyGOIo6Rt">Recipes
<ul>
<li>All Recipes</li>
<li>Appetizers</li>
<li>Snacks</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Drinks</li>
<li>Desserts</li>
<li>Other Recipes</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Projects%20%26%20Crafts#.UuP03OIo6Rt">Projects
<ul>
<li>For the Home</li>
<li>Kids & Family</li>
<li>Travel Solutions</li>
<li>Gift Ideas</li>
<li>Other</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Organize%20Your%20Life#.UuP2yuIo6Rt">Organization
<ul>
<li>One Space at a Time</li>
</ul>
</a></li></ul>
CSS:
/* ----- NAVMENU ----- */
#nav, #nav ul {
padding: 0px;
margin: 0;
z-index: 999;
margin-top: -80px;
margin-left: 100px;
list-style: none;
color: #007581;
}
#nav a {
display: block;
width: 6.5em;
}
#nav li {
float: left;
width: 6.5em;
font-size:18px;
color: #ff6962
}
#nav li ul {
position: absolute;
width: 6em;
font-size: 5px;
left: -999em;
}
#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Keep in mind that I am very much a beginner, but I would appreciate any help I can get. Thanks so much!
Your HTML is totally broken. You have
<a><ul><li><a>...</a></li></ul></a>
you cannot have anchors inside anchors like that. Your css also doesn't make much sense. You've got position: absolute, but no position: relative anywhere else, so ALL of the nested <ul>'s are going to be in the wrong place.
Your HTML structure is bad. I'm sorry to say that. But here I try to fix it for you.
Fiddle
HTML:
<ul id="nav">
<li>
About Me
<ul>
<li>About Me</li>
<li>Photo Album</li>
</ul>
</li>
<li>
Blog Series
<ul>
<li>Guest Post Monday</li>
<li>Infographic Monday</li>
<li>What I Wore Wednesday</li>
<li>Fun Friday Link Party</li>
</ul>
</li>
<li>Freebies
<ul>
<li>Giveaways</li>
<li>Printables</li>
</ul>
</li>
<li>Recipes
<ul>
<li>All Recipes</li>
<li>Appetizers</li>
<li>Snacks</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Drinks</li>
<li>Desserts</li>
<li>Other Recipes</li>
</ul>
</li>
<li>Projects
<ul>
<li>For the Home</li>
<li>Kids & Family</li>
<li>Travel Solutions</li>
<li>Gift Ideas</li>
<li>Other</li>
</ul>
</li>
<li>Organization
<ul>
<li>One Space at a Time</li>
</ul>
</li>
</ul>
CSS:
/* ----- NAVMENU ----- */
#nav, #nav ul {
padding: 0px;
margin: 0;
z-index: 999;
margin-top: 0px;
margin-left: 100px;
list-style: none;
color: #007581;
}
#nav a {
display: block;
width: 6.5em;
}
#nav li {
float: left;
width: 6.5em;
font-size:18px;
color: #ff6962
}
#nav li ul {
position: absolute;
width: 6em;
font-size: 5px;
left: -999em;
}
#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
I hope it will help you on solving this problem.. :)
EDIT: in theory i think i could accomplish this by having a dummy ul between the 2 level and then positioning the 'second (now 3rd) level. Crude proof of concept > http://jsfiddle.net/petergus/jk7vU/
I have a horizontal dropdown menu that I am trying to get to stretch its parent div height.
The problem I run into is the child ul. In order to get it to sit on a line below the main menu I have to use position: absolute but that takes it out of the flow.
Is it even possible to have a multilevel horizontal list without set container height?
EDIT: Here is an illustration screenshot of what i am trying to accomplish. EXCEPT the content (black text behind) should slide down.
Here is how the content slides down >
as far as i can tell this is simple a problem of position: relative vs absolute
Please see a sample setup at http://jsfiddle.net/petergus/nC32t/
HTML:
<div class="mnavwrapper">
<div id="mnav">
<ul class="menu clearfix">
<li class="first expanded">
<span title="" class="nolink">Click me here</span>
<ul class="submenu clearfix">
<li class="first leaf">consultancy</li>
<li class="leaf">daylight</li>
<li class="leaf">solutions</li>
<li class="leaf">design</li>
<li class="leaf">something</li>
<li class="last leaf">team</li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">portfolio</span>
<ul class="submenu clearfix">
<li class="first leaf">all projects</li>
<li class="leaf">commercial</li>
<li class="leaf">public</li>
<li class="leaf">private</li>
<li class="leaf">something</li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">another</span>
<ul class="submenu clearfix">
<li class="first leaf">techniques </li>
<li class="last leaf">influences</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="contentbody">
<p>Hello text</p>
</div>
CSS:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
ul.menu {
/*display: inline-block;*/
list-style: none;
clear: both;
width: 100%;
display: block;
position:relative;
}
ul.menu li {
/*float: left;*/
padding: 0px 10px;
display: inline;
}
ul.menu li {
float: left;
}
ul.submenu {
list-style: none;
position: absolute;
width: 100%;
}
ul.submenu li {
float: left;
}
.mnavwrapper {
/*clear: both;*/
}
#mnav {
background: lightblue;
/*float: left;*/
width: 100%;
}
#contentbody {
background: pink;
}
p {
padding: 0px;
margin: 0px;
}
jQuery:
$('.active-trail').addClass('selected');
$('ul.menu .nolink').click(function() {
$(this).parent().toggleClass('selected').end().next('ul').slideToggle().parent().siblings('li').find('ul').slideUp(150).parent().removeClass('selected');
});
I think this is what you want:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>test doc</title>
<style type="text/css">
ul {
display: table;
padding: 0;
}
li {
display: inline-block;
white-space: nowrap;
width: 13em;
}
li li {
display: none;
width: auto;
}
li:hover li {
display: inline-block;
}
</style>
</head>
<body>
<p>dfhg</p>
<ul>
<li>Hover here for sub-menu
<ul>
<li>daylight</li>
<li>solutions</li>
<li>design</li>
<li>something</li>
<li>team</li>
</ul>
</li>
<li>Yet another sub-menu
<ul>
<li>daylight</li>
<li>solutions</li>
<li>design</li>
<li>something</li>
<li>team</li>
</ul>
</li>
</ul>
<p>Hello text</p>
</body>
</html>
cheers,
gary
something like this?: http://jsfiddle.net/chanckjh/DDeRT/
html:
<div class="nav">
<ul>
<li class="nav1">nav
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li class="nav2">nav2
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</div>
css:
.nav > ul >li{
display: inline;
position: absolute;
}
.nav1{
left: 50px;
}
.nav2{
left: 100px;
}
.nav > ul >li > ul > li{
display: none;
}
.nav > ul >li:hover > ul > li{
display: inline;
}