This is a double part fragment of dropdown menu with double part the issue is that I cannot make the two div be aside each other unless I use the div width to any ration.
the CSS code what I want is a method to display the two div below aside each other without using the width property in the html code.
.navbar ul li a{
text-decoration: none;
color: black;
padding: 16.2px;
display: block;
}
.navbar{
width: 100%;
height: 50px;
position: relative;
margin: 0;
padding: 0;
background-color: #c7ffff;
border:1px solid black;
}
.dropnavbar{
position: absolute;
margin: 0;
padding: 0;
height: 60px;/*can be negliacted if the default is auto*/
}
.active{
float: left;
text-align: center;
list-style: none;
width: 100px;
font-size: 15px;
}
.subnavbar{
display:none;
padding: 0;/*if forgotten the size of the dropdown nav will be greater than it's parrent*/
margin: 0;
}
.navbar li:hover .subnavbar{
display: block;
}
.navbar li:hover li,.navbar li:hover{
background-color:#e0ffff;
}
.subnavbar>li>a:hover{
background-color: aqua;
}
.subnavbar>li:nth-child(n+2){
border-top: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<link href="navbar.css" rel="stylesheet">
<title>DropDown NavBar Trial 3</title>
</head>
<body>
<header>
<div class="navbar">
<ul class="dropnavbar">
<li class="active">About
</li>
<li class="active">Branches
<ul class="subnavbar">
<li class="active">Egypt
</li>
<li class="active">USA
</li>
<li class="active">UAE
</li>
<li class="active">France
</li>
</ul>
</li>
<li class="active">Categories
<div style="width:auto;">
<div style="float:left; width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
<div style="float:right;width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
</div>
</li>
<li class="active">Paying
</li>
</ul>
</div>
</header>
</body>
</html>
I hope this example will help you out!!!!
* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:2em;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
text-decoration:none;
line-height:2em;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
}
#nav li:hover ul {
left:0;
top:auto;
}
<ul id="nav">
<li>Link1</li>
<li>Link2
<ul>
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Link3</li>
</ul>
Related
I am building a website for a non-profit company an d I need a dropdown menu in it.
I found this tut on youtube
"https://www.youtube.com/watch?v=wHFflWvii3M"
As far as I can see Iḿ doing everything just as is is supposed to be done. But somehow the menu will not react as in dropdown.
What is going wrong?
Here is a copy of my html
<!DOCTYPE html>
<html>
<head>
<title>dropdown </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#">Home<a></li>
<div class="sub-menu-1">
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
<li>sub5</li>
<li>sub6</li>
<li>sub7</li>
</ul>
</div>
<li>Nieuws</li>
<li>de Klomp</li>
<li>de Werkplaats</li>
<li>Activiteiten</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
</body>
</body>
</html>
And here of my css code//
*
{
padding: 0;
margin: 0;
}
body
{
background-image: url(deKlomp.jpg);
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-bar
{
background: rgb(0,100,0);
text-align: center;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color:#fff
}
.menu-bar ul li
{
widows: 120px;
margin: 15px;
padding: 12px;
}
.menu-bar ul li a
{
text-decoration: none;
color:#fff;
}
.active, .menu-bar ul li:hover
{
background: #2bab0b;
border-radius:3px;
}
.menu-bar .fa
{
margin-right: 8px;
}
.sub-menu-1
{
display:none;
}
.menu-bar ul li:hover .sub-menu-1
{
display: block;
position: absolute;
background: rgb(0,100,0);
margin-top: 15px;
margin-left: -15px;
}
Your code its not exactly same like on this video tutorial ;)
First: you have /body twice
Second: "li" closing should be after you sub-menu div, not after
<li class="active"><a href="#">Home<a>
All here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>dropdown </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#">Home<a>
<div class="sub-menu-1">
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
<li>sub5</li>
<li>sub6</li>
<li>sub7</li>
</ul>
</div>
</li>
<li>Nieuws</li>
<li>de Klomp</li>
<li>de Werkplaats</li>
<li>Activiteiten</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/watch.png");
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-bar{
background: #005400;
width:100%;
padding:20px;
}
.menu-bar > ul{
width:85%;
margin:auto;
display: flex;
justify-content:space-around;
}
.menu-bar ul li{
list-style: none;
}
.menu-bar > ul > li a{
padding: 10px 20px 10px 20px;
color:#ffffff;
text-decoration:none;
}
.sub_menu{
display:none;
}
.menu-bar ul li ul.sub_menu li{
padding:20px;
width:100px;
}
.menu-bar ul li:hover > ul.sub_menu{
display: block;
position:absolute;
background:#005400;
margin-top:20px;
}
.menu-bar ul li a:hover{
background:#2BAB0B;
padding: 10px 20px 10px 20px;
border-radius:5px;
}
<div class="menu-bar">
<ul>
<li class="active">Home
<ul class="sub_menu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>News
<ul class="sub_menu">
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ul>
</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
This is what I want to achieve, whenever the user hovers on the listed Parent Category, it will display its 1st level child category as show in the image below. When the user hovers the parent category, it will show its child category.
This is my HTML Structure plus its CSS
HTML
.categories {
padding: 0;
margin: 0;
}
.categories a {
color: #FFF !important;
text-decoration: none;
font-size: 16px;
}
.categories ul {
list-style: none;
}
.categories ul li {
background: #000;
color: #FFF;
margin-bottom: 30px;
/* REMOVE THIS*/
vertical-align: top;
}
.categories ul li a {
display: inline-block;
margin-right: 15px;
position: relative;
}
/*CHILDREN */
.categories ul li ul {
padding: 0;
width: 100% auto;
display: inline-block;
}
.categories ul li ul li {
margin: 0 15px 0 0;
}
.categories ul li ul li {
width: auto;
display: block;
position: relative;
}
<li class="categories">
ARTICLES
<ul>
<li class="cat-item cat-item-1">
BPI
<ul class='children'>
<li class="cat-item cat-item-2449">
BPI Car Loan
</li>
<li class="cat-item cat-item-2448">
BPI Credit Card
</li>
<li class="cat-item cat-item-2446">
BPI Express Online
</li>
<li class="cat-item cat-item-2450">
BPI Housing Loan
</li>
<li class="cat-item cat-item-2447">
BPI Loans
</li>
</ul>
</li>
<li class="cat-item cat-item-2451">
Tech
<ul class='children'>
<li class="cat-item cat-item-2455">
Desktop
</li>
<li class="cat-item cat-item-2454">
Laptop
</li>
<li class="cat-item cat-item-2452">
Smart Phone
</li>
<li class="cat-item cat-item-2453">
Tablet
</li>
</ul>
</li>
</ul>
</li>
You may see the codes in action in the fiddle below.
https://jsfiddle.net/qnb986nd/
Here's my dilemma.
The problem with my code is the PARENT is sitting at the bottom (again, see my fiddle) of its container.
Another issue is that the children should be hidden first. It should be shown WHEN the parent category is hovered by the user. I've tried the visibility:hidden/visible; but it's not working.
Your help is highly appreciated.
you can fix the parent thing easily enough with vertical-align:top
with a bit of tinkering i got it to work
Jsfiddle
.categories {
padding: 0;
margin: 0;
}
.categories a {
color:#FFF !important;
text-decoration:none;
font-size:16px;
}
.categories ul {
list-style:none;
vertical-align:top;
}
.categories ul li {
background:#000;
color:#FFF;
vertical-align:top;
}
.categories ul li a{
display:inline-block;
margin-right:15px;
position:relative;
}
/*CHILDREN */
.categories ul li ul {
padding:0;
width:100% auto;
display:none;
}
.categories ul li:hover ul {
padding:0;
width:100% auto;
margin:0!important;
display:inline-block;
}
.categories ul li:hover a {
display:inline-block;
}
.categories ul li ul:hover li{
display:block;
left:500px!important;
width:200px;
position:absolute;
}
<li class="categories">
ARTICLES
<ul>
<li class="cat-item cat-item-1">
<a href="#" >BPI</a>
<ul>
<li class="cat-item cat-item-2449">
<a href="http://localhost/wp/category/bpi/bpi-car-loan/" >BPI Car Loan</a>
</li>
<li class="cat-item cat-item-2448">
<a href="#" >BPI Credit Card</a>
</li>
<li class="cat-item cat-item-2446">
BPI Express Online
</li>
<li class="cat-item cat-item-2450">
<a href="#" >BPI Housing Loan</a>
</li>
<li class="cat-item cat-item-2447">
<a href="#" >BPI Loans</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-2451">
<a href="#" >Tech</a>
<ul>
<li class="cat-item cat-item-2455">
<a href="#" >Desktop</a>
</li>
<li class="cat-item cat-item-2454">
<a href="#" >Laptop</a>
</li>
<li class="cat-item cat-item-2452">
<a href="#" >Smart Phone</a>
</li>
<li class="cat-item cat-item-2453">
<a href="#" >Tablet</a>
</li>
</ul>
</li>
</ul>
</li>
Like miss Rachel says fix the parent thing easily enough with vertical-align:top.
And this is how to beautify your navbar. You can take a look from my example and learn from it.
HTML
<nav style="background-color:black;">
<ul>
<li>Home</li>
<li>Articles
<ul>
<li>Blogging</li>
<li>How To Guides</li>
<li>Tech
<ul>
<li>Mobile</li>
<li>Tablet PC</li>
</ul>
</li>
</ul>
</li>
<li>Submit An Article
<ul>
<li>Your Movie</li>
<li>User Experience</li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
CSS
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #000 0%, #020202 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
DEMO
Is there anything you not clear just comment. :)
Please check this demo. It may solve your problem JS Fiddle
CSS
.categories {
padding: 0;
margin: 0;
}
.categories a {
color:#FFF !important;
text-decoration:none;
font-size:16px;
}
.categories ul {
list-style:none;
}
.categories ul li {
background:#000;
color:#FFF;
vertical-align:top;
}
.categories ul li a{
display:inline-block;
margin-right:15px;
position:relative;
}
/*CHILDREN */
.categories ul li ul {
padding:0;
width:100% auto;
display:none;
}
.categories ul li ul{
margin:auto 50px ;
position:relative;
top:-18px;
}
.categories ul li ul li {
width:auto;
display: block;
position:relative;
}
.categories ul li:hover ul
{
display:block
}
HTML
<li class="categories">
ARTICLES
<ul>
<li class="cat-item cat-item-1">
<a href="http://localhost/wp/category/bpi/" >BPI</a>
<ul class='children'>
<li class="cat-item cat-item-2449">
<a href="http://localhost/wp/category/bpi/bpi-car-loan/" >BPI Car Loan</a>
</li>
<li class="cat-item cat-item-2448">
<a href="http://localhost/wp/category/bpi/bpi-credit-card/" >BPI Credit Card</a>
</li>
<li class="cat-item cat-item-2446">
<a href="http://localhost/wp/category/bpi/bpi-express-online/" >BPI Express Online</a>
</li>
<li class="cat-item cat-item-2450">
<a href="http://localhost/wp/category/bpi/bpi-housing-loan/" >BPI Housing Loan</a>
</li>
<li class="cat-item cat-item-2447">
<a href="http://localhost/wp/category/bpi/bpi-loans/" >BPI Loans</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-2451">
<a href="http://localhost/wp/category/rock-band/" >Tech</a>
<ul class='children'>
<li class="cat-item cat-item-2455">
<a href="http://localhost/wp/category/rock-band/desktop/" >Desktop</a>
</li>
<li class="cat-item cat-item-2454">
<a href="http://localhost/wp/category/rock-band/laptop/" >Laptop</a>
</li>
<li class="cat-item cat-item-2452">
<a href="http://localhost/wp/category/rock-band/smart-phone/" >Smart Phone</a>
</li>
<li class="cat-item cat-item-2453">
<a href="http://localhost/wp/category/rock-band/tablet/" >Tablet</a>
</li>
</ul>
</li>
</ul>
</li>
I wrote a code using different internet source and I ran into a problem every object that's in the bottom of the menu parts cannot be interacted the menu interferes everything below him where the dropdown falls . the hitbox of the menu seems to included the dropdown even when its not shown
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Help will be appreciated
edit:
the menu is working but everything below him in the area where the dropdown fals dosent
I have a horizontal nav bar and my links are lining up diagonally instead of horizontally. There are also bullets showing up by the links too.
Here is my HTML:
<nav id="site" class="body">
<ul>
<li id="meet">Meet the Staff</li>
<li id="conditions">Conditions</li>
<li id="info">Patient Information</li>
<li id="billing">Billing & Insurance</li>
<li id="contact"><a id="right" href="https://painandspinecenter.myezyaccess.com">Contact Us</a></li>
</ul>
My CSS
nav a {
color: #ffffff;
font-size:13px;
list-style:none;
text-decoration:none;
margin: 0 auto;
}
nav li a {
display: block;
float: left;
list-style: none;
height: 44px;
text-align: center;
border-right: 1px solid #fff;
padding-top:10px;
width: 157px;
margin: 0 auto;
text-decoration:none;
}
nav li a#right {
border-right: none;
text-align:top;
}
The website is painandspinecenter.net
any help would be GREATLY APPRECIATED!
I think this is what you wanted. See the fiddle here : http://jsfiddle.net/fyw435h3/
You were missing this from your CSS
nav li{
display: inline;
}
You have some errors that consist in using your A tags as block elements when you should have benn using your LI tags, consider changing your CSS to the following:
#site {
background:#069
}
nav a {
color: #ffffff;
font-size:13px;
list-style:none;
text-decoration:none;
margin: 0 auto;
}
nav li {
display:inline-block;
list-style: none;
height: 44px;
text-align: center;
border-right: 1px solid #fff;
padding-top:10px;
width: 140px;
margin: 0 auto;
text-decoration:none;
}
nav li a#right {
border-right: none;
text-align:top;
}
<nav id="site" class="body">
<ul>
<li id="meet">Meet the Staff
</li>
<li id="conditions">Conditions
</li>
<li id="info">Patient Information
</li>
<li id="billing">Billing & Insurance
</li>
<li id="contact"><a id="right" href="https://painandspinecenter.myezyaccess.com">Contact Us</a>
</li>
</ul>
</nav>
Fiddle Link
I just want to make a mega drop down menu for my website . the above link is what I've done for now . what i just want is make all main titles inline . but it just stay like block . how can i make the header "Loans", ""Leasing (Automotive)" in one line and other lists under them ?
Demo
css
body {
font: 300 86% helvetica, arial, sans-serif;
color: #000;
background: #fff;
margin: 0;
padding: 0;
}
#wrapper {
width: 980px;
min-height: 600px;
margin: 0 auto;
}
nav {
display: block;
position: relative;
width: 980px;
height: 50px;
margin: 0 auto;
background: #8dc63f;
}
nav ul#menu {
display: block;
margin: 0;
padding: 0;
list-style: 0;
}
nav ul#menu li {
position: relative;
display: inline-block;
}
nav ul#menu li a {
display: block;
height: 50px;
font-size: 1em;
line-height: 50px;
color: #fff;
text-decoration: none;
padding: 0 15px;
}
nav ul#menu li a:hover, nav ul#menu li:hover > a {
background: #333;
}
nav ul#menu li:hover > #mega {
display: block;
}
#mega {
position: absolute;
top: 100%;
left: 0;
width: 920px;
height: auto;
padding: 20px 30px;
background: #333;
display: none;
}
ul#menu ul {
float: left;
width: 23%;
margin: 0 2% 15px 0;
padding: 0;
list-style: none;
}
ul#menu ul li {
display: block;
}
ul#menu ul li a {
float: left;
display: block;
width: 100%;
height: auto;
line-height: 1.3em;
color: #888;
text-decoration: none;
padding: 6px 0;
}
ul#menu ul li:first-child a {
font-size: 1.2em;
color: #8dc63f;
}
ul#menu ul li a:hover {
color: #fff;
background: none;
}
ul#menu ul li:first-child a:hover {
color: #fff;
}
/* clearfix */
nav ul:after {
content:".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
nav ul {
display: inline-block;
}
html[xmlns] nav ul {
display: block;
}
* html nav ul {
height: 1%;
}
#content {
padding: 30px 0;
}
html
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin nav -->
<nav>
<ul id="menu">
<li>Products & Services
<div id="mega">
<ul>
<li>Loans
</li>
<li>Mortgage Loans
</li>
<li>SME Loans
</li>
<li>Revolving Loans
</li>
<li>Professional Loans
</li>
<li>Personal Loans
</li>
<li>Micro Loans
</li>
<li>Commercial Credit
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
<ul>
<li>Loans
</li>
<li>Mortgage Loans
</li>
<li>SME Loans
</li>
<li>Revolving Loans
</li>
<li>Professional Loans
</li>
<li>Personal Loans
</li>
<li>Micro Loans
</li>
<li>Commercial Credit
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
</div>
</li>
<li>Locations
</li>
<li>Our Team
</li>
<li>Testimonials
</li>
<li>FAQ
</li>
<li>News & Events
</li>
<li>Contact
</li>
</ul>
</nav>
<!-- /nav -->
<div id="content">
<p>Page content...</p>
</div>
</div>
<!-- /wrapper -->
Put the 2nd tier ul's inside the li for the header. Then just add this to your stylesheet:
nav .dropdown-list > li {
float:left;
}
View fiddle: http://jsfiddle.net/7WXZL/1/
In html
<ul id="main_menu">
<li class="main_list">Electronics
<ul>
<p class="category_header">Buy Any Electronics Item And Get Flat 50% OFF</p>
<ol>
<li>Mobiles</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>
<li class="main_list">Food&Snacks
<ul>
<p class="category_header">Buy Any Food&Snacks Item And Get Upto 40% OFF</p>
<ol>
<li>Pulses</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>
write more if you want
in css
body
{
text-align:center;
font-family:helvetica;
background-color:#424242;
}
h1
{
margin:0px;
margin-top:40px;
color:#8181F7;
font-size:45px;
}
#main_menu
{
background-color:#1C1C1C;
float:left;
padding:0px;
width:700px;
height:50px;
line-height:50px;
margin-left:140px;
border-radius:5px;
}
#main_menu .main_list
{
color:white;
list-style-type:none;
float:left;
border-left:1px solid #666;
padding-left:27px;
padding-right:27px;
}
#main_menu .main_list:hover
{
color:#2E9AFE;
}
.main_list ul
{
background-color:white;
width:600px;
position:absolute;
left:150px;
width:700px;
padding:0px;
float:left;
padding-bottom:10px;
}
.main_list ul p
{
color:white;
background-color:#2E9AFE;
margin:0px;
text-align:left;
padding-left:10px;
font-size:20px;
font-weight:bold;
}
.main_list ul ol
{
float:left;
padding:0px;
list-style-type:none;
margin-left:30px;
}
.main_list ul ol li
{
line-height:25px;
font-weight:bold;
font-size:16px;
color:#2E9AFE;
}
.main_list ul ol li:first-of-type
{
list-style: none;
font-size:19px;
margin-top:10px;
color:#084B8A;
}
.main_list:hover ul
{
display:block;
}
.main_list ul
{
display:none;
}
this is the main code from http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php to create css mega drop down menu