I have a vertical menu some of which have sub menu displayed to the right side. When I hover first menu and sub menus of it, it displays the second set of sub menu belonging to third menu.
<body>
<ul class="menu">
<li>Population and Socio-Economic Atlas
<ul>
<li>Population
<ul>
<li>Population Density</li>
<li>Population By Sex</li>
<li>Population By Age</li>
</ul>
</li>
<li>Education</li>
<li>Agriculture
<ul>
<li>Agricultural Land</li>
<li>Agriculture Holding</li>
<li>Agriculture By Type</li>
</ul>
</li>
</ul>
</li>
<li>Level1 Menu2</li>
<li>CA Election 2070
<ul>
<li>Districts</li>
<li>Constituencies</li>
<li>Result
<ul>
<li>District Map</li>
<li>Constituencies Map</li>
<li>Election Result 2070</li>
</ul>
</li>
</ul>
</li>
<li>To Be Continued</li>
</ul>
</body>
my CSS below:
.menu,
.menu ul,
.menu li,
.menu a {
margin: 5px;
padding: 0;
}
.menu {
height: 250px;
width: 300px;
background: #FFCC99;
}
.menu li {
width:100%;
height:25px;
text-align:left;
display: block;
padding: 0 0px;
margin: 3px 0px;
line-height: 25px;
border-bottom: 1px solid #393942;
}
.menu li a {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
text-decoration: none;
font-size: 14px;
}
.menu li:hover > a { color: #FF0000; }
/* second level menu */
.menu ul {
position: relative;
width: 200px;
top: -26px;
left: 295px;
opacity: 0;
background: #CCCCCC;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 25px;
overflow: hidden;
padding: 0 0px;
width: 200px;
padding: 0 0px;
margin: 6px 0px;
border: none;
border-bottom: 1px solid #353539;
}
.menu li:hover > ul li {
height: 25px;
overflow: visible;
padding: 0 0px;
}
.menu ul li a {
font-family: Helvetica, Arial;
font-style: italic;
font-weight: normal;
font-size: 12px;
}
.menu ul li:last-child a { border: none; }
/* third level menu */
.menu ul ul {
position: relative;
width: 200px;
top: -26px;
left: 195px;
opacity: 0;
background: #00FF00;
}
.menu ul ul:hover > ul { opacity: 1; }
.menu ul ul li {
height: 25px;
overflow: hidden;
padding: 0 0px;
width: 200px;
padding: 0 0px;
margin: 6px 0px;
border: none;
border-bottom: 1px solid #0000FF;
}
.menu ul ul ul:hover > ul {
height: 25px;
overflow: visible;
padding: 0 0px;
}
.menu ul ul li a {
font-family: Helvetica, Arial;
font-style: italic;
font-size: 12px;
}
.menu ul li:last-child a { border: none; }
How to solve this problem?
You need to use display: block/none; instead of overflow: hidden/visible to hide/unhide your sub-menus.
Here's the fiddle
overflow only affects visibility of the element. The element still exists in the DOM and responds to/ triggers all events associated with it. Hence, the issue.
That happens because you use opacity to hide sub menus. When opacity is 0 then sub menu is still on page, and receives mouse events. Submenus added to lower elements, are higher in visibility stack, and that reason why they steal hover. Instead of opacity use display.
Fiddle: http://jsfiddle.net/mL3eD/
Related
I have a menu and submenu from one of the elements. The code is here: http://jsfiddle.net/mq5g6upe/ . I would like you to tell me how to implement vertical dropdown menu from element My project because now it not seem ok.
header.html
<header>
<div class="main">
<ul>
<li>Home</li>
<li>My projects
<ul class="my-projects-dropdown">
<li>Endless Blow
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>My Google Play link</li>
<li>About</li>
<li><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
</ul>
</div>
</header>
header.css
#container {
margin: 0 auto;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
}
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a:hover {
background-color: cyan;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
vertical-align: middle;
line-height: normal;
}
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
}
ul li:nth-child(5){
margin-left: 20px;
vertical-align: middle;
line-height: normal;
}
ul ul {
display: none;
position: absolute;
}
ul ul li {
float:none;
display:list-item;
position: relative;
}
Now there are three problems. First the submenu of items seems to overlap on another elements. Second there is a distance between the menu element My projects and first element of submen. Third outside jsfiddle in production (https://jakuwegiel.web.app/home) also submenu is moved a bit to right.
I forked your fiddle. check this https://jsfiddle.net/wrtxkz0d .
Made these changes in your css. Dropdown is working.
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
margin:0;
padding: 0;
}
ul ul li {
float:none;
display:list-item;
position: relative;
margin: 13px 0;
}
i am trying to learn how to make hover on image in
navbar
my goal is to make the div-image "pic-index" to be
affcted by hover on "HOME" link in navbar and make the div to be
changed into another image by hover .
i really dont have any idea
how i can do such thing .
here is my HTML :
I added an snippet to my question, so you can see what I current have in my code
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:absolute;margin-left:936px;margin-top:62px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav"> <ul class="mainul"> <ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="images/nav-home-normal.png"></div> <li class="contact">צור קשר <ul>
</ul> </li> <li class="services">שירותים <ul> <li>Tutorial #1##</li> <li>Tutorial #2</li> <li>Tutorial #3</li> </ul> </li>
<li class="about">אודות
</li> <li class="home">דף הבית</li>
</ul> </ul> </div>
Once your .home is after the .pic-index you only can achieve that with some JS or jQuery, here's a solution with jQuery.
If .pic-index comes before .home, then you would be able to use only CSS, but it's not the case.
(I Added an image just to represent the effect, run the snippet in FULLSCREEN to better visualization)
EDIT
Another thing, I made a small update in the css, but it's up for you to keep it or no (added css to img class).
ALSO, you have some HTML structure errors in the lists, some ul and li starts and ends on wrong places
/* HOVER */
$(function() {
$('.home').mouseenter(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png'
);
});
$('.home').mouseleave(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png'
);
});
});
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:relative;
top:30%;
float: right;
margin-right: 50px;
}
.pic-index img{
max-width: 48px;
max-height: 48px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav"> <ul class="mainul">
<ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png"></div>
<li class="contact">צור קשר
<ul>
</li>
</ul>
<li class="services">שירותים
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about">אודות</li>
<li class="home">דף הבית</li>
</ul>
</div>
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
I have a simple vertical hover menu and even when I don't hover over any buttons but the cursor is a little to the right of it, it shows the submenu. When there isn't a submenu the main menu button starts to flicker. I am not entirely sure what is going on and why it is happening. Here is link to show what I mean.
EDIT: Thank you for your responses! Now I'm having a different/almost same problem. The menu doesn't freak out any more, but now there's a bar that sticks out of it and it is still opening the submenus without having to hover over the parent menu. Link to picture here.
Here's my HTML
<div id="divMenu">
<ul>
<li>Home1</li>
<li>Home2
<ul>
<li>Homed</li>
<li>Homee</li>
<li>Homef</li>
</ul></li>
<li>Home3
<ul>
<li>Homeg</li>
<li>Homeh</li>
<li>Homei</li>
</ul></li>
<li>Home4</li>
<li>Home5
<ul>
<li>Homej</li>
<li>Homek</li>
<li>Homel</li>
</ul></li>
<li>Home6</li>
</ul>
</div>
And my CSS
<style type="text/css">
#divMenu {
margin: 0px;
padding: 0px;
}
#divMenu ul {
margin: 0px;
padding: 5px 15px;
}
#divMenu li {
margin: 4px;
padding: 4px;
}
#divMenu li li {
margin: 0px;
padding: 0px;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 25px;
}
#divMenu li {
list-style: none;
position: relative;
background: #000;
}
#divMenu li li {
list-style: none;
position: relative;
background: #000;
left: 95px;
top: -30px;
}
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #fff;
}
#divMenu ul li:hover > a {
background-color: #fff;
color: #000;
}
#divMenu a:hover {
font-weight: normal;
color: #000;
}
</style>
Just remove width:0px from #divMenu ul li:hover > a and #divMenu a:hover from your style.
The problem of the block tripping is because of the width in the block underneath:
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
Just remove that width and it should work.
It's due to the zero width you're applying to the links. You really don't need that.
#divMenu ul li:hover > a {
/*width: 0px;*/
background-color: #fff;
color: #000;
}
#divMenu a:hover {
/*width: 0px;*/
font-weight: normal;
color: #000;
}
#divMenu {
margin: 0px;
padding: 0px;
}
#divMenu ul {
margin: 0px;
padding: 5px 15px;
}
#divMenu li {
margin: 4px;
padding: 4px;
}
#divMenu li li {
margin: 0px;
padding: 0px;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 25px;
}
#divMenu li {
list-style: none;
position: relative;
background: #000;
}
#divMenu li li {
list-style: none;
position: relative;
background: #000;
left: 95px;
top: -30px;
}
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #fff;
}
#divMenu ul li:hover > a {
/*width: 0px;*/
background-color: #fff;
color: #000;
}
#divMenu a:hover {
/*width: 0px;*/
font-weight: normal;
color: #000;
}
<div id="divMenu">
<ul>
<li>Home1</li>
<li>Home2
<ul>
<li>Homed</li>
<li>Homee</li>
<li>Homef</li>
</ul></li>
<li>Home3
<ul>
<li>Homeg</li>
<li>Homeh</li>
<li>Homei</li>
</ul></li>
<li>Home4</li>
<li>Home5
<ul>
<li>Homej</li>
<li>Homek</li>
<li>Homel</li>
</ul></li>
<li>Home6</li>
</ul>
</div>
I make pure css menu with 2 levels .But now I need to make it 3 levels .I tried many time but not working for me . here is the jsfiddle .
I don't need any jquery code, just pure css .
CSS
#menu {
width: 980px;
height: 30px;
float: left;
border-top: dashed 1px #d8d8d8;
margin-left: 7px;
}
#menu ul.Mainmenu {
width: 996px;
margin: 0px;
padding: 0px;
margin-top: 10px;
}
#menu ul.Mainmenu li {
float: left;
list-style: none;
margin-right: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #860300;
margin-right: 16px\9; /* IE8 and below */
position: relative;
height: 30px;
}
#menu ul.Mainmenu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #860300;
}
ul li ul {
padding: 0;
position: absolute;
top: 25px;
left: -10px;
width: 190px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
z-index: 100000;
width: 200px;
background-color: #FFF;
padding: 7px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
ul li ul li {
color: #fff;
float: left;
width: 190px;
height: auto !important;
min-height: 20px;
margin-bottom: 9px;
line-height: 18px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding-top: 3px;
padding-left: 3px;
}
ul li ul li a {
color: #fff;
font-size: 12px !important;
}
ul li ul li:hover {
background: #820B06;
color: #FFF;
}
ul li ul li:hover a {
color: #FFF !important;
}
ul li:hover ul {
opacity: 1;
visibility: visible;
}
Thanks guys
See this example
css
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
margin:0;
padding:10px 20px;
position:relative;
height:20px;
line-height:20px;
background-color:#EEE;
}
#nav > ul > li {
float: left;
height:30px;
line-height:30px;
background-color:#CCC;
}
#nav li > ul{
visibility:hidden;
width:200px;
position: absolute;
top:0px;
left:200px;
border-left:1px solid #000;
}
#nav > ul > li > ul{
top:50px;
left:0;
}
#nav li:hover{
background-color:#999;
}
#nav li:hover > ul{
visibility:visible;
}
html
<div id="nav">
<ul>
<li>Level 1
<ul>
<li>Level 2-1</li>
<li>Level 2-2
<ul>
<li>Level 3-1</li>
<li>Level 3-2</li>
</ul>
</li>
</ul>
</li>
</ul>
Here i added sample CSS Menu with level 3. Please check and let me know. Hope it should helpful for you. Thanks.
.third-level-menu
{
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
</ul>
I have also put together a live demo here http://jsfiddle.net/4ScFz/400/ that's available to play with.