i have created designlike below image 1.But i want to design like image2.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/menu/megamenu.css">
<link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/menu/style2.css">
<link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/main.css">
<link href="http://1mrshoes.com/css/style.css" rel="stylesheet" type="text/css">
<link href="http://1mrshoes.com/css/jquery-ui.css" rel="stylesheet">
<link rel="shortcut icon" href="http://1mrshoes.com/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://1mrshoes.com/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/StyleSheet.css">
<link rel="stylesheet" type="text/css" href="http://1mrshoes.com/css/hint.css">
<style>
.header-top
{
background: #302f2f;
padding: 1px;
}
.cssmenu ul li a
{
color: #ddd;
display: block;
margin: 0px 10px;
text-transform: uppercase;
font-size: 0.8125em;
}
.cssmenu ul li a:hover
{
color: #555;
}
img
{
/* max-width: 100%; */
padding: -3px;
padding-right: -16px;
margin-right: 21px;
padding-left: 230px;
}
.header-bottom
{
background: #262626;
padding: 5px 0;
}
.megamenu>li>a {
float: right;
padding: 8px 20px;
text-decoration: none;
text-transform: uppercase;
font-size: 0.85em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
<form id="form1" runat="server">
<div class="header-top">
<div class="logo">
<img src="http://1mrshoes.com/images/logo.png" alt=""></a>
</div>
<div class="cssmenu">
<ul>
<li id="ctl00_liSignIn" class="active"><a href="http://1mrshoes.com/loginoregister.aspx">
Sign up /Sign In</a></li>
<li>
<div id="blocknewcart">
<div class="trianle">
</div>
<div class="itemcart">
New item added in your cart <a style="color: black; font-size: 9px; font-weight: bold;">
view cart</a></div>
</div>
<a>Cart (<span id="ctl00_lblCartCount" class="lbltotalcart">0</span>)</a></li>
<li><a>Track order</a></li>
<li><a>My order</a></li>
</ul>
</div>
<div class="clear">
</div>
</div>
<div class="header-bottom">
<div class="container">
<!-- start header menu -->
<ul id="ctl00_UlMenu" class="megamenu skyblue">
<li class="showhide" style="display: none;"><span class="title">MENU</span><span
class="icon1"></span><span class="icon2"></span></li><li
class="grid" style="display: inline-block;"><a class="color2" href="#">Brand</a><div
class="megapanel" style="display: none; opacity: 1;">
<div class="row">
<div class="col1">
<div class="h_nav">
<h4>
SPORT SHOES</h4>
<ul>
<li><a>ADIDAS</a></li><li><a>NIKE</a></li><li><a>
REEBOK</a></li><li><a>PUMA</a></li><li>
<a>CHINA</a></li><li><a>
max air</a></li><li><a>mrshoes</a></li><li><a>
mr.shoes</a></li><li><a>air</a></li><li>
<a>Harley Johns</a></li><li>
<a>kappa shoes</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
FORMAL SHOES</h4>
<ul>
<li><a>PUMA</a></li><li><a
>LOUIS VUITTON</a></li><li>
<a >F-LEGACY</a></li><li>
<a >DEVILS</a></li><li><a
>mr shoes</a></li><li><a
>mr.shoes</a></li><li>
<a >oxedo</a></li><li><a
>Almon</a></li><li><a >
Leather Club</a></li><li><a>
Chris Brown</a></li><li><a>ALDO</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
LOAFERS</h4>
<ul>
<li><a>VERSACE</a></li><li><a
>HERMES </a></li>
<li><a>ARMANI</a></li><li><a>BOTTEGA VENETA</a></li><li>
<a >LOUIS VUITTON</a></li><li>
<a >LEEFOX</a></li><li><a>
CHINA</a></li><li><a >leathe
club</a></li><li><a>mr shoes</a></li><li>
<a>mr.shoes</a></li><li>
<a>fendi</a></li><li><a>
DV</a></li><li><a >beagle</a></li><li>
<a>JIMMY CHOO</a></li><li><a
>GOOS</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
SLIPPERS</h4>
<ul>
<li><a>ADIDAS</a></li><li><a
>NIKE</a></li><li><a>
PUMA</a></li><li><a>VERSACE</a></li><li>
<a>HERMES </a>
</li>
<li><a>GUCCI </a></li>
<li><a>PRADA</a></li><li><a>LOUIS VUITTON</a></li><li>
<a>CONVERSE</a></li><li><a
>TOMMY HILFIGER</a></li><li>
<a >lacoste</a></li><li><a
>mr.shoes</a></li><li><a
>Giuseppe Zanotti</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
FANCY BOYS TREND</h4>
<ul>
<li><a>ADIDAS</a></li><li>
<a>VERSACE</a></li><li>
<a>SUPER DRY</a></li><li>
<a>XUV FASHION</a></li><li>
<a>ROCK</a></li><li><a
>CONVERSE</a></li><li>
<a>VANS</a></li><li><a
>TOMMY HILFIGER</a></li><li>
<a >CHINA</a></li><li><a
>lacoste</a></li><li><a
>toms</a></li><li><a>
SKECHERS </a></li>
<li><a >mr.shoes</a></li><li>
<a >SEASTAR</a></li><li>
<a>air</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
CHAPPAL</h4>
<ul>
<li><a>PUMA</a></li><li><a>
LEEFOX</a></li><li><a>mr.shoes</a></li><li>
<a>ALDO</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
Casual Shoes</h4>
<ul>
<li><a>ADIDAS</a></li><li>
<a>NIKE</a></li><li><a>
PUMA</a></li><li><a>VERSACE</a></li><li>
<a >PRADA</a></li><li><a
>mr shoes</a></li><li><a
>mr.shoes</a></li><li>
oxedo</a></li><li><a
>beagle</a></li><li><a >
Giuseppe Zanotti</a></li><li><a > GOOS</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
Watches
</h4>
<ul>
<li>ARMANI</a></li><li><a
DIESEL</a></li><li>
police</a></li><li>CASIO</a></li><li>
Daniel Wellington
(DW)</a></li><li>audemars
piguet</a></li><li>Tissot
</a></li>
<li>Rolex</a></li><li><a
hublot</a></li><li>
patek philippe</a></li><li> ferrari</a></li><li><a href="http://1mrshoes.com/brand/Watches-/ck.aspx">ck</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
Goggles</h4>
<ul>
<li>LOUIS VUITTON</a></li><li>
Ray Ban</a></li></ul>
</div>
</div>
<div class="col1">
<div class="h_nav">
<h4>
T-SHIRT</h4>
<ul>
<li>ADIDAS</a></li></ul>
</div>
</div>
</div>
</div>
</li>
<li style="display: inline-block;"><a class="color3" >
SPORT SHOES</a></li><li style="display: inline-block;"><a class="color4">
FORMAL SHOES</a></li><li style="display: inline-block;"><a class="color5">
LOAFERS</a></li><li style="display: inline-block;"><a class="color6" >
SLIPPERS</a></li><li style="display: inline-block;"><a class="color7">
FANCY BOYS TREND</a></li><li class="grid" style="display: inline-block;"><a class="color2"
>More</a><div class="megapanel" style="display: none;
opacity: 1;">
<div class="row">
<div class="col1">
<div class="h_nav">
<h4>
Other Categories</h4>
<ul>
<li><a
Watches </a></li>
hoe<li>Casual Shoes</a></li><li>
goggles</a></li><li>
T-SHIRT</a></li></ul>
</div>
</div>
</div>
</div>
</li>
<li style="display: inline-block;"><a class="color1" >
Contact us</a></li></ul>
<div class="clear">
</div>
</div>
</div>
</form>
</body>
</html>
this is code plz help
