How to create dropdown navigationbar without using float?? I tried but I am little bit far from my answer, My code is as below ##
HTML
<div id="nav">
<ul>
<li>Animals</li>
<li>Birds</li>
<li>Vegetables
<ul>
<li>Okra</li>
<li>Runner Beans</li>
<li>Pumkin</li>
</ul>
</li>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Lemom</li>
</ul>
</li>
</ul>
CSS
#nav{width:100%;}
#nav ul{list-style-type:none; margin:0; padding:0; background-color:#9900CC;}
#nav ul li{display:inline;}
#nav ul li a{color:#ffffff; text-decoration:none; display:inline-block; padding:15px; font-weight:700;}
#nav ul li a:hover{background-color:#5F6975;}
#nav ul ul{position:absolute; background:#5F6975; display:none;}
#nav ul li:hover > ul{display:block;}
#nav li ul li{display:block;}
Please help me....
You can use positioning and inline-block:
* {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}
#nav > ul > li {display: inline-block; position: relative; width: 100px; padding: 5px;}
#nav > ul > li ul {position: absolute; display: none;}
#nav > ul > li:hover ul {display: block; border: 1px solid #ccc; width: 100px; padding: 5px;}
#nav a {display: block;}
<div id="nav">
<ul>
<li>Animals</li>
<li>Birds</li>
<li>Vegetables
<ul>
<li>Okra</li>
<li>Runner Beans</li>
<li>Pumkin</li>
</ul>
</li>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Lemom</li>
</ul>
</li>
</ul>
</div>
Related
How do get CSS to only affect the first list (menu items) only, and not the second list? Please help. I've been at this all day. If you could, copy/paste the complete code back in your response. VERY appreciated!
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style></head>
<body>
<ul id="drop-nav">
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
I've only changed two pieces of your code. You will see where I reference the class .menu in your CSS and where i'm using the class="menu" on your drop-nav list.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
.menu li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style>
</head>
<body>
<ul id="drop-nav" class="menu">
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
You can give html elements ids or classes, ids are for unique elements and classes are for more common elements.
In the Css you can give a class a set styling. For you problem follow the ideas I present below:
First line html elements give a class
<ul href='#' class="headingItem></ul>
To style those elements with that class (Css):
.headingItem{
Colour:blue
}
Try using a CSS class. You can target only the ` elements with that class:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul.menu {list-style: none;padding: 0px;margin: 0px;}
ul.menu li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul.menu li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul.menu li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style></head>
<body>
<ul id="drop-nav">
<li class="menu">Support</li>
<li class="menu">Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li class="menu">Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li class="menu">Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
The CSS is designed to change the link to red when you hover over it. Just want that to happen with the menu list links. Not the Google/Yahoo list links.
You have this
li:hover a {background: #f00;}
Change that to
ul li:hover a {background: #f00;}
This will differentiate it from the ol links
Change li:hover a {background: #f00;} to ul > li:hover a {background: #f00;}.
> means Child, or sub item. This will make only your navigation links (or other links in an ul > li tag) be red when hovered. Or try this: #drop-nav > ul > li:hover a {background: #f00;} for only your navigator.
Hope it helps.
You should name your first ul with class or id and then use this form of CSS selecor ul.class > li. This is the only way to get to the first level of children.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font-family: Arial;
font-size: 14px;
}
ul {
list-style-type: none;
padding: 0;
}
ul.menu > li {
background-color: red;
float: left;
position: relative;
width: 100px;
margin-right: 5px;
padding: 5px;
}
ul.menu > li ul {
position: absolute;
top: 26px;
left: 0px;
display: none;
}
ul.menu > li:hover ul {
display: block;
}
ul.menu > li ul li {
width: 100px;
padding: 5px;
background-color: green;
}
</style>
</head>
<body>
<ul class="menu">
<li>First
<ul>
<li>Sub-First</li>
<li>Sub-Second</li>
<li>Sub-Third</li>
</ul>
</li>
<li>Second</li>
<li>Third
<ul>
<li>Sub-First</li>
<li>Sub-Second</li>
<li>Sub-Third</li>
</ul>
</li>
</ul>
</body>
</html>
I want to make a menu with different background color having a submenu and a nested submenu both with different background color . When I hover over submenu list then it should display nested submenu .How to do it ? . This is my code .
<html> <head> <title>Example of HTML Menu</title>
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontal li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid pink;
border-style:inset;
}
#horizontalmenu li ul
{
display:none;
position:absolute;
}
#horizontalmenu ul li:hover > ul {
display: block;
}
#horizontalmenu li:hover ul
{
display:block;
background:red;
height:auto;
width:8em;
background-color: green;
}
#horizontalmenu ul ul ul{
clear:both; border-style:none;
left:100%;
}
</style>
</head>
<body>
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul class="horizontal"><li>IT/Software</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontal li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid pink;
border-style:inset;
}
#horizontalmenu li ul
{
display:none;
position:absolute;
}
#horizontalmenu ul li:hover > ul {
display: block;
}
#horizontalmenu li:hover ul
{
display:block;
background:red;
height:auto;
width:8em;
background-color: green;
}
#horizontalmenu ul ul ul{
clear:both; border-style:none;
left:100%;
}
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul class="horizontal"><li>IT/Software</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
</ul>
</li>
</ul>
</div>
Here i have applied/fixed your codes for the menu you are trying to achieve. You can change Background Color and Font Color easily. Wish this work for you.
#horizontalmenu ul {
list-style: none;
padding: 0;
}
#horizontalmenu > ul:after{
clear:both;
content:"";
display:block;
}
#horizontalmenu > ul > li {
float: left;
position: relative;
border: 1px solid #CC55FF;
}
#horizontalmenu > ul > li > a {
text-decoration: none;
padding: 5px 10px;
display:block;
color: black;
}
#horizontalmenu > ul > li > a:hover {
background-color: lightgreen;
}
#horizontalmenu > ul > li > ul {
background-color:red;
display: none;
width:150px;
top:100%;
left:0;
position: absolute;
}
#horizontalmenu > ul > li > ul > li {
position: relative;
width:100%;
display: block;
}
#horizontalmenu > ul > li > ul > li > a {
text-decoration: none;
padding: 5px 10px;
display:block;
color: black;
}
#horizontalmenu > ul > li > ul > li > a:hover {
background-color:white;
}
#horizontalmenu > ul > li:hover > ul {
display: block;
}
#horizontalmenu > ul > li > ul > li > ul {
display:none;
background-color:lightblue;
position:absolute;
left:100%;
top:0;
width: 150px;
background-color: green;
}
#horizontalmenu > ul > li > ul > li > ul > li > a {
text-decoration: none;
padding: 5px 10px;
display:block;
color: black;
}
#horizontalmenu > ul > li > ul > li > ul > li > a:hover {
background-color:yellow;
}
#horizontalmenu > ul > li > ul > li:hover ul {
display: block;
}
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National
</li>
<li>
International
</li>
<li>
Sport
</li>
<li>
Hollybood
</li>
</ul>
</li>
<li>
Technology
<ul>
<li>
IT/Software
</li>
<li>
Hardware
</li>
<li>
Iphone
<ul class="horizontal">
<li>
IT/Software
</li>
</ul>
</li>
<li>
Neuro-Science
</li>
</ul>
</li>
<li>
Sports
<ul>
<li>
Cricket
</li>
<li>
Tenis
</li>
<li>
Badminton
</li>
<li>
Hockey
</li>
</ul>
</li>
<li>
Country
<ul>
<li>
India
</li>
<li>
America
</li>
<li>
France
</li>
</ul>
</li>
</ul>
</div>
I've added additional styles. Hope it will help
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontal li
{
float:left;
position:relative;
padding-right:100;
display:block;
border:4px solid pink;
border-style:inset;
}
#horizontalmenu li ul
{
display:none;
position:absolute;
}
#horizontalmenu ul li:hover > ul {
display: block;
}
#horizontalmenu li:hover ul
{
display:block;
background:red;
height:auto;
width:8em;
background-color: green;
}
#horizontalmenu ul ul ul{
clear:both; border-style:none;
left:100%;
}
#horizontalmenu li ul.horizontal {
display: none;
}
#horizontalmenu #horizontalmenu li:hover ul.horizontal {
display: block;
}
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul class="horizontal"><li>IT/Software</li><li>IT/Software 2</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
</ul>
</li>
</ul>
</div>
I'm trying to accomplish a few things and don't know where to start.
1. I would like to make it so that the menu would stretch across the entire width of the page.
2. I would like to refine the size of the subs to equal the width of the main option.
3. If I made it into a nav and changed the routing, would it be able to operate as DDM?
jsfiddle of the code in question: http://jsfiddle.net/Ph2Wb/
jsfiddle of the page I want to incorporate it into: http://jsfiddle.net/dQ3ey/
HTML
<ul id="menu">
<li>Home</li>
<li>Final</li>
<li>Midterm</li>
<li>Homework Assignments
<ul>
<li>CS/IS 101
<ul>
<li>Puzzles
<ul>
<li>Chapters 1-3</li>
<li>Chapters 4-6</li>
<li>Chapters 7-9</li>
<li>Chapters 10-12</li>
</ul>
</li>
<li>Word
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Excel
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Access
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>PowerPoint
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</li>
<li>CS/IS 260
<ul>
<li>Ch. 1</li>
<li>Ch. 2</li>
<li>Ch. 3</li>
<li>Ch. 4</li>
<li>Ch. 5</li>
</ul>
</li>
</ul>
</li>
<li>Class Assignments
<ul>
<li>CS/IS 101
<ul>
<li>Puzzles</li>
<li>Word</li>
<li>Excel</li>
</ul>
</li>
<li>CS/IS 260
<ul>
<li>Puzzles</li>
<li>Word</li>
<li>Excel</li>
</ul>
</li>
</ul>
</li>
<li>Favorite Sites</li>
<li>About Me</li>
CSS
#menu, #menu ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2.5em;
}
#menu a:link, #menu a:active, #menu a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}
#menu a:hover{
background-color:#fff;
color:#333;
}
#menu li{
float:left;
position:relative;
}
#menu ul {
position:absolute;
width:12em;
top:2.5em;
display:none;
}
#menu li ul a{
width:12em;
float:left;
}
#menu ul ul{
top:auto;
}
#menu li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
You have to do lot of CSS changes to make it work like how you want. I have updated your fiddle and come up with the changes. It is very difficult to explain each and every thing. So kindly go through the code one by one yourself.
#menu{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2.5em;
width:100%;
background-color:#333;
display:inline-block;
}
#menu a:link, #menu a:active, #menu a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
width:100%;
}
#menu a:hover{
background-color:#fff;
color:#333;
}
#menu ul a:link, #menu ul a:active, #menu ul a:visited{
width:calc(100% - 12px);
}
#menu li{
float:left;
position:relative;
}
#menu ul {
position:absolute;
top:2.5em;
left:-2.5em;
list-style-type:none;
list-style-position:outside;
line-height:2.5em;
display:none;
width:100%;
}
#menu ul li{display:inline-block; width:100%}
#menu li ul a{
float:left;
}
#menu ul ul{
top:auto;
}
#menu li ul ul {
position:absolute;
left:100%;
margin:0px 0 0 -2em;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
FIDDLE DEMO
i have a menu that when i hover has a drop down i follow this
and this but unfortunately im getting different result than expected..im getting list but it is displayed as line horizontally and not vertically like the example here is the code i added to make the drop down
css
ul # menu li ul .submenu{
display:none;
}
ul # menu li : hover ul .submenu{
display:block;
}
here is the html
<div id="menu">
<ul id="menu-list">
<li id="">Home</li>
<li id="">
Menu
<ul class="sub-menu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
</ul>
</li>
<li id="">Menu</li>
<li id="">Menu</li>
<li id="">Menu</li>
</ul>
</div>
Here you go:
Updated Fiddle
Just the small change. Made UL id = "menu"
<ul id="menu">
<li id="home">Home</li>
<li id="townoffice">
Menu
<ul class="sub-menu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
</ul>
</li>
<li id="busines">Menu</li>
<li id="residents">Menu</li>
<li id="tourists">Menu</li>
</ul>
HTML
<ul id="nav" class="sixteen columns">
<li>Home
</li>
<li>Portfolio
<ul>
<li>Asia
<ul>
<li>Korea</li>
<li>China</li>
<li>Japan</li>
</ul>
</li>
<li>Europe
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
#nav {
width:800px;
margin:30px 50px;
padding: 0;
float:left;
}
#nav li {
list-style: none;
float: left;
padding:0 10px;
background-color:#367FB3;
color:white;
}
#nav li a:hover {
background-color:#52baff;
color:#fff;
}
//daf adf
/*--temp--*/
#nav ul ul li {
clear:left;
}
#nav ul ul {
position:absolute;
left:14em;
top:0;
}
#nav ul ul li a {
display:block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
/*--end temp--*/
#nav li a {
display: block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
#nav a:hover {
color:#367FB3;
}
#nav a:active {
color:#367FB3;
}
#nav li ul {
display: none;
width: 14em;
/* Width to help Opera out */
background-color:transparent;
z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
display: block;
position: absolute;
margin:0px -10px;
padding:0px;
}
#nav li:hover ul ul {
display:none;
}
#nav li ul li:hover ul {
display:block
}
#nav li:hover li, #nav li.hover li {
float: none;
line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
background-color:#367FB3;
color:#fff;
font-size:13px;
font-family:"Lato" !important;
}
#nav li li a:hover {
background-color:#52baff;
color:#fff;
}
FIDDLE
I have a menu like this
<nav id="nav">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</nav>
My CSS file is like this
#nav ul li {
display: inline;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
position: absolute;
}
#nav ul ul li {
display: block;
}
The sub-menu items drop down and look just fine, it's just that they're dropping down under the first list item, Home.
How can I get them to drop down under the parent list item they're under?
Here is a fiddle with a working solution: http://jsbin.com/akazev/2/edit
Have a look at the new CSS:
nav ul li {
display: block;
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
margin-left: -30px;
}
nav ul ul li {
display: block;
float: none;
}
Instead of displaying your first-level links as inline, display them either as inline-block or float. That was what bugged the nav. If you use float (like I did), don't forget to set the deeper level links to float: none. You will also have to set a margin-left for the absolutely positioned ul's.
PS: Isn't <nav id="nav"> a bit pointless?
Try this
<html>
<head>
<style type="text/css">
#nav ul li {
float:left;
}
#nav ul ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position:absolute;
}
#nav ul ul li {
display: block;
border:1px #ccc solid;
padding:2px;
float:none;
}
</style>
</head>
<body>
<dev id="nav">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</dev>
</body>
</html>
Here you are mate just update your code to
#nav ul li {
display: inline;
}
#nav li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul ul li {
display: block;
}
http://jsfiddle.net/dPgQN/ <--- this is a live preview
Try this..
HTML Code:
<div id="navMenu">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</div>
CSS:
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:5px;
list-style:none;
float:left;
position:relative;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
}
#navMenu ul li:hover ul{
right: auto;
left: 0;
visibility:visible
}
I hope this is useful for you.,