How to expand and collapse a responsive mobile menu - javascript

I have created a responsive menu, all that is left is to make it toggle. I am unsure as how to show the menu when the word menu is pressed. By default the menu is collapsed, then when the menu button is pressed it expands and when the button is pressed again it collapases.
Could someone please help me out as I am new and unsure about this. I have uploaded my project onto jsfiddle. link
http://jsfiddle.net/bLbdavqu/2/
HTML:
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
CSS:
body {
background:brown;
}
#pull {
display:none;
float:left;
height:auto;
width:100%;
}
#pull img {
float:right;
}
#nav{
float:left;
height:155px;
width:63%;
background:url(../images/top-banner.png) no-repeat;
background-position:bottom;
background-size:100%;
position:relative;
}
#nav ul {
height:auto;
width:100%;
list-style-type:none;
position:absolute;
bottom:0;
*zoom:1;
}
#nav ul li {
float:left;
padding-left:20px;
position:relative;
}
#nav ul li a {
font-family:Trajan-Pro;
font-size:0.9em;
color:#fff;
text-decoration:none;
}
#nav ul li a:hover {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
#nav ul li:hover > a {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
/*1st level sub-menu */
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
height:auto;
width:180px;
display:block;
}
#nav ul ul li:hover > a {
color:#d2aa76;
border-bottom:none;
}
#nav ul ul {
padding:0;
position:absolute;
top:100%;
padding-top:15px;
}
#nav ul ul li {
float:none;
position:relative;
padding:7px 0px;
border-top:1px solid #000;
background: #423d33;
background: linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);
-webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;
}
#nav ul ul li a {
font-size:0.8em;
padding-left:15px;
}
#nav ul ul li a:hover {
border-bottom:none;
}
#media screen and (max-width: 1900px) {
#logo {
height:95px;
width:100%;
background:none;
}
#logo h1 {
top:0;
margin:0;
padding-top:10px;
}
#header-container {
height:auto;
}
#pull {
display:block;
}
#nav {
height:100%;
width:100%;
background:none;
margin:0;
padding:0;
clear:both;
}
#nav ul {
height:100%;
position:static;
margin:0;
padding:0;
display:block;
}
#nav ul > li {
float: none;
}
#nav ul li {
padding-left:0px;
}
#nav ul li a {
display:block;
padding: 9px 9px;
position: relative;
z-index:100;
}
#nav ul ul {
position:relative;
top:0;
bottom:0;
margin:0;
padding:0;
}
#nav ul li:hover > ul {
height:auto;
width:100%;
}
#nav ul ul li {
border-top:none;
background: #615f5b;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#nav ul ul li a {
display: block;
padding-left:30px;
position: relative;
z-index: 100;
}
#nav ul > li.hover > ul , .nav li li.hover ul {
position: static;
}
}

You can use javascript to change the attribute:
I made a jsfiddle: http://jsfiddle.net/bLbdavqu/3/
function show(){
var show = document.getElementById('the_menu');
show.setAttribute('style','display:inline');
}
You can wrap it inside a div to make it easier and then change the display from none to inline. Question: do you want to give users the change to hide the menu when they click again on menu?
Or, if you are ready to use jquery, just use toggle:
$(document).ready(function(){
$('button').click(function () {
$("#toggle").toggle();
});});
http://jsfiddle.net/bLbdavqu/5/

<div id="nav"><!--nav-->
<div id="pull">
Menu
</div><br/><br/>
<div id="the_menu">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
</div>
Script
<script>
function show(ValueToggle){
if(ValueToggle==1){
$('#the_menu').show();
$('#pulls').attr('onClick','show(0)');
} else {
$('#the_menu').hide();
$('#pulls').attr('onClick','show(1)');
}
}
</script>

You can use JQuery to toggle Menu http://jsfiddle.net/bLbdavqu/8/
Just Change the CSS of the ul.
Hide List- $( "#mylist" ).css("display","none");
Show List- $( "#mylist" ).css("display","block");

I think you want to show the menu items("Home","About Gnosis",etc) on click of link "menu" and
again hide these items on click of link "menu" . I made a jsfiddle for you http://jsfiddle.net/Tushar490/kL1dgvmr/6/
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<div id="bs-example-navbar-collapse-2">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div>
</div><!--/nav-->
Script :-
$(document).ready(function () {
$("#pull").on('click',function () {
$("#bs-example-navbar-collapse-2").toggle();
});
});
In CSS you just need to remove "float:left;" from "#pull" .
Hope this would help to you !!

here is the solution please see the code at
$(document).ready(function(){
$('#test').hide();$('#pull').click(function () {$("#test").toggle();});});
http://jsfiddle.net/bLbdavqu/12/
the updation of your requirements.

Related

Open/Close menu On click using only javascript no jquery

This is my html file
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li>Home</li>
<li>About</li>
<li class="pjlist" onclick="load">Projects
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li>Projects1</li>
<li>Projects2</li>
<li>Projects3</li>
</ul>
</div>
</li>
<li class="svlist" onclick="load">Services
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li>Services1</li>
<li>Services2</li>
<li>Services3</li>
<li>Services4</li>
<li>Services5</li>
</ul></div>
</li>
<li>Contact Us</li>
</ul>
</div>
</form>
and this is my css class
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top:30px;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.arrow2 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1 {
visibility:hidden;
}
.sub2 {
visibility:hidden;
}
I can do the same thing in css but requires many exceptions to be added so as to work in each and every browser but javascript is something that I haven't used before and I was suggested that it can be fairly easy to do with it.
So please can someone tell me how to open/close the sub-menu using only javascript.
Thanks in advance!!!
Try this it will work on 'hover' event not on 'click' but full css.
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility:hidden;
}
ul li:hover div
{
visibility: visible;
}
ul li:hover ul
{
visibility: visible;
}
Try this:
<style>
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility: hidden;
}
</style>
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li>Home</li>
<li>About</li>
<li id="pjlist">Projects
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li>Projects1</li>
<li>Projects2</li>
<li>Projects3</li>
</ul>
</div>
</li>
<li id="svlist" onclick="load">Services
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li>Services1</li>
<li>Services2</li>
<li>Services3</li>
<li>Services4</li>
<li>Services5</li>
</ul></div>
</li>
<li>Contact Us</li>
</ul>
</div>
</form>
</body>
</html>
<script>
var myMenu = document.getElementById("pjlist");
var open = false;
myMenu.addEventListener("click", function()
{
if(open)
{
//then close
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'hidden';
}
else
{
//open
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'visible';
}
});
</script>
You can use
var myMenus = document.getElementsByClassName()
to add the event listner on all your menu children.
Good Luck

jQuery .toggle() child issue

I am having an issue where my jQuery will toggle when clicking within .mini-nav li rather than just .nav ul li. What would be the best way to fix this issue?
HTML:
<div class="nav">
<ul>
<li>
<img src="./assets/icon-down_arrow.png" />LoLNode
<ul class="mini-nav">
<li>Home</li><br />
<li>Popular</li><br />
<li>Create</li><br />
</ul>
</li>
</ul>
</div>
CSS:
.nav {
padding:5px 0;
background: -webkit-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
}
.nav > ul {
width:1000px;
margin:auto auto;
list-style-type:none;
}
.nav ul > li {
display:inline-block;
padding:10px 5px;
font-size:16px;
color:#FFF;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.nav ul li > .mini-nav {
min-width:92px;
position:absolute;
top:51px;
list-style-type:none;
background:#222;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
display:none;
}
.nav ul li .mini-nav > li {
display:inline-block;
padding:2px 5px;
background:#222;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
font-size:12px !important;
color:#FFF;
}
jQuery:
$('.nav ul > li:first-child').on('click', function() {
$('ul.mini-nav').toggle();
});
You need to stop event propagation when you click inner li, so that event doesn't bubble up to the outer list where it's handled, toggling inner one:
$('.nav > ul > li:first-child').on('click', function () {
$('ul.mini-nav').toggle();
});
$('ul.mini-nav').on('click', function (e) {
e.stopPropagation();
});
Demo: http://jsfiddle.net/8op8qt8w/
Also note that I fixed selector a little
.nav > ul > li:first-child
^-- here
One more thing: remove <br> after li. You want to make li block instead of inline-block if you want them to be rendered on the next line.

centering links in a drop down javascript menu

I have a drop down menu that has sub menus, the entire menu spans the whole width of the browser, right now the links are all positioned to the left of the screen. What I would like is my links to be all in the center of the screen, with the orange background still spanning the entire width of the browser.
Here is the code:
inside the head goes the javascript and the css, and the rest in the body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).children(":hidden").slideDown();
},function(){
$(this).parent().find("ul").slideUp();
});
});
</script>
<style>
#menu{
height: 30px;
background-color:#F90;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>Info
<ul>
<li>example</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>
Add margin: auto and display: table:
css
#menu{
height: 30px;
background-color:#F90;
width:100%;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:auto;/*Add this*/
display: table;/*Add this*/
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
fiddle

Drop Down Menu Similar to xenForo?

How can I create a dropdown menu similar to xenforo, which will automatically close after 2 seconds?
I've tried searching but unfortunately couldn't find any proper solution.
But I don't know how to and what code to put to achieve like; 1. The drop down menu open after 2 seconds if the mouse cursor hovers over the main menu link for 2 seconds. 2. The drop down closes if the mouse cursor is away from the drop down for 2 seconds.
Thanks!
Here is Jsfiddle;
Try this:
$(document).ready(function(){
$("#sub-menu li").hide(); // Hide in order to fadeIn to work
$("#main-menu ul").hover(
function(){
$("#sub-menu li").fadeIn(slow);
},
function(){
$("#sub-menu li").fadeOut(slow);
});
});
You can use jquery to use this functionality. Instead of waiting for 2 seconds you can use fade out slow so that users can know something will happen.
$(document).ready(function(){
$("#sub-menu").hide(); // Hide in order to fadeIn to work
$("#main-menu").hover(
function(){
$("#sub-menu").fadeIn(slow);
},
function(){
$("#sub-menu").fadeOut(slow);
});
});
<html>
<head>
<style>
.dd_menu {
background: none;
padding: 0px;
margin:0;
list-style-type:none;
height:10px;
border: none;
font-size: 11px;
font-family: "Candarab";
}
.dd_menu li {
background: none;
float: left !important;
height:20px;
margin-left: 1px;
margin-top: 4px;
}
.dd_menu li a {
padding: 15px 5px;
display:inline;
color:#000;
text-decoration:none;
font:11px arial, verdana, sans-serif;
}
.dd_menu li:hover a {
text-decoration:none;
padding: 15px 5px;
}
.dd_menu ul {
position:absolute;
left:-9999px;
top:9px;
list-style-type:none;
text-decoration: none;
float: left !important;
}
.dd_menu li:hover {
position:relative;
background:#176093;
text-decoration: none;
z-index: 1000;
}
.dd_menu li:hover ul {
left:0px;
top:20px;
background:lavender;
padding: 3px 3px;
border:1px solid grey;
width:160px;
text-decoration: none;
}
.dd_menu li:hover ul li {
height:18px;
border:none;
}
.dd_menu li:hover ul li a {
height:18px;
padding:0px;
display:block;
font-size:11px;
width:158px;
line-height:18px;
text-indent:5px;
color:#444;
background-color:lavender;
text-decoration:none;
border:1px solid transparent;
}
.dd_menu li:hover ul li a:hover {
height:18px;
background:silver;
color:#000;
float: left;
border:solid 1px #444;
}
</style>
</head>
<body>
<ul class="dd_menu">
<li>Main Menu <span class="smallesttext">▼</span>
<ul>
<div align="left">
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
</div>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".dd_menu li a").hover(
function(){
$(".dd_menu li ul div li a").hide().fadeIn('slow');
},
function(){
});
$("ul div li").hover(
function(){
$(".dd_menu li ul div li a").show();
},
function(){
;
});
});
</script>
</body>
</html>
Try this. Similarly add what you want on mouse out. If it helped think about accepting the answer.

how to center dropdown menu when position is absolute for dropdown menu

my dropdown menu has position absolute and I want to center my dropdown menu to its respective li.I dont want to set margin statically because it will affect to other menu as well.
HTML
<div class="top_nav">
<!--naviagation top Begins-->
<ul>
<li id="active">
<img src="images/home.png" />home
<!-- <div class="DDmenu" id="hmedd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>-->
<div class="clear"></div>
<div class="current_menu"></div>
</li>
<li id="abt" onmouseover="showmenu('abtdd');" onmouseout="hidemenu('abtdd');" >
about us
<div class="DDmenu" id="abtdd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>
</li>
<li id="invent" onmouseover="showmenu('inventdd');" onmouseout="hidemenu('inventdd');">
inventions
<div class="DDmenu" id="inventdd" style="display:none">
<ul>
<li>Dummy Invent1</li>
<li>Dummy Invent2</li>
<li>Dummy Invent3</li>
</ul>
</div>
</li>
<li id="archi" onmouseover="showmenu('archidd');" onmouseout="hidemenu('archidd');">
architectural
<div class="DDmenu" id="archidd" style="display:none">
<ul>
<li>Dummy Architecture1</li>
<li>Dummy Architecture2</li>
<li>Dummy Architecture3</li>
</ul>
</div>
</li>
<li id="artli" onmouseover="showmenu('artlidd');" onmouseout="hidemenu('artlidd');">
art pieces
<div class="DDmenu" id="artlidd" style="display:none">
<ul>
<li>Dummy art1</li>
<li>Dummy art2</li>
<li>Dummy art3</li>
</ul>
</div>
</li>
<li id="caravanli" onmouseover="showmenu('caravanlidd');" onmouseout="hidemenu('caravanlidd');">
caravan
<div class="DDmenu" id="caravanlidd" style="display:none">
<ul>
<li>Dummy caravan1</li>
<li>Dummy caravan2</li>
<li>Dummy caravan3</li>
</ul>
</div>
</li>
<li id="tab">
tables
</li>
</ul>
<!--naviagation top Ends-->
</div>
CSS:
.top_nav
{
width:100%;
height:30px;
/*margin-left:130px;*/
}
.top_nav ul
{
padding:0;
margin:0 0 0 68px;
}
.top_nav ul li#active
{
float:left;
position:relative;
padding:5px 0 0 0;
background: #c2cca2;
margin:0 8px;
color:#000;
list-style:none;
}
.top_nav ul li
{
float:left;
position:relative;
padding:12px 0 7px 35px; /*added padding top+5 to add space between bg and text*/
margin:0 8px;
list-style:none;
}
.top_nav ul li a
{
text-decoration:none;
text-transform:capitalize;
color:#fff;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
.top_nav ul li:hover a{color:#000;}
.top_nav ul li ul li a{color:#FFF!important;}
.top_nav ul li ul li:hover a{color:#000!important;}
.top_nav ul li a#active
{
text-decoration:none;
text-transform:capitalize;
color:#000;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
/*.top_nav ul li:hover
{
/*background:#c2cca2;
background:url(../images/menu_bg.png) left top repeat-y;
}*/
.top_nav ul li#abt
{
background:#c2cca2;
}
.top_nav ul li#invent
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#archi
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#artli
{
background:url(../images/art.png) 5px 5px no-repeat;
height:19px;
}
.top_nav ul li#caravanli
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#tab
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#abt:hover
{
background:#c2cca2;
color:#000 !important;
height:19px;
}
.top_nav ul li#abt:hover>a:hover{color:inherit;}
.top_nav ul li:hover
{
color:#000;
}
.top_nav ul li#invent:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#archi:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#artli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#caravanli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#tab:hover
{
/*background:#c2cca2;*/
background:#c2cca2;
color:#000;
}
/*.top_nav ul li a:hover
{
background:#c2cca2;
padding:16px 6px 2px 0;
padding:16px 6px 0 0\0/;
}*/
.top_nav ul li img
{
/*float:left;
position:relative;*/
padding:0 4px 0 5px;
}
JS
function showmenu(idm)
{
document.getElementById(idm).style.display='';
}
function hidemenu(idmn)
{
document.getElementById(idmn).style.display='none';
}
any suggestion would be appreciated.
hi i have a suggestion for you why not you use a navigation code without javascript try this
let me know if you have any issue or you want to use only javascript navigation
go this below link
http://jsfiddle.net/sarfarazdesigner/pNAkf/
or u can copy this code
css code :
*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#f7f7f7;}
#wrapper{width:980px; margin:50px auto;}
#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{
float:left;
border-right:1px solid #ccc;
position:relative;
}
ul#nav li a{
padding:0 15px;
display:block;
text-decoration:none;
color:#fff;
}
#nav li a:hover{
background:#ccc;
}
ul.subnavi{
list-style:none;
position: absolute;
left: 0;
background: #fff;
display:none;
}
ul.subnavi li{
display:block;
width:120px;
float:none;
}
ul#nav li ul.subnavi li a{
color:#333;
}
ul#nav li ul.subnavi li a:hover {
background:#333;
color:#fff;
}
#nav li:hover ul{
display:block;
}
html code is:
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Services
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Products</li>
<li>FaQs</li>
<li>Contact
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Blog</li>
</ul>
</div>
your css for .top_nav ul affects all the ul in the topnav class
try adding this to your css
.DDmenu
{
background: none repeat scroll 0 0 #DDDDDD; // just to show your result
display: none;
margin-left: -24px;
position: absolute;
}

Categories