CSS Mega Drop down Menu - html

Question

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 ?

Answer 1

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 -->

Answer 2

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/

Answer 3

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