how to make custom multi column drop down submenu - html

Question

i already did a drop down menu in my wordpress site. its a common drop down menu. but now i need to make it as a multi column drop down submenu.
i went through so many sites and tried different css. nothing creates anything like in that reference site. please help me with customizing the existing css style to attain multicolumn submenu structure.
my current menu css:-
.menu{
width:941px;
max-width:100%;
height:47px;
margin-left:30px;
float:left;
background:url(../images/other.gif) repeat-x;
}
.menu ul{padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.menu li:first-child{
margin:0px 0px 0px 0px;
padding:16px 0px 0px 40px;
list-style:none;
background-image:url(../images/hom.gif);
background-repeat:repeat-x;
float:left;
height:47px;
}
.menu li{
margin:0px 0px 0px 0px;
padding:16px 0px 10px 30px;
list-style:none;
background-image:url(../images/nav_img.png);
background-repeat:no-repeat;
float:left;
height:47px;
}
.menu a{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
color:#000;
letter-spacing:2px;
padding-right:10px;
text-transform: uppercase;
text-decoration:none;
transition: text-shadow 1s;
-moz-transition: text-shadow 1s; /* Firefox 4 */
-webkit-transition: text-shadow 1s; /* Safari and Chrome */
-o-transition: text-shadow 1s; /* Opera */
}
.menu a:hover{
text-shadow: 0 0 5px #006994;
color:#ccffff;
}
.menu .current-menu-item{
text-shadow: 0 0 5px #fff;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 64%; left: 0; z-index: 598; width:auto;}
#cssmenu ul ul li {float: none;background:#3891C9!important;border-bottom:1px solid #00569c;height:auto;}
#cssmenu ul ul ul {top:0; left: auto; right: -99.5%; width:100%;}
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;border-left:1px solid #00569c;}
#cssmenu ul ul a { display:block; line-height:1em; text-align:left; letter-spacing:0.5px;font-size:12px;}
#cssmenu ul ul li a:hover{ color:#ccffff; }
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
the menu structure is :
<div id="cssmenu" class="menu">
<ul class="menu">
<li>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
</ul>
</li>
</ul>
</div>
currently my menu like this http://jsfiddle.net/2wxje/

Answer 1

My CSS:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 480px;
margin: 10px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #FF0064;
background-image: linear-gradient(#FF0064, #FF0010);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #FF0064;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #FF0064;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
#menu li:hover > .no-transition {
display: block;
}
Javascript Code:
<script>
var $=jQuery;
$(document).ready(function(){
var location=window.location.pathname;
$("#menu a").each(function(){
if(location.lastIndexOf($(this).attr("href"))!=-1){
$(this).css({color:"white"});
}
});
});
</script>
PHP Code:
<?php wp_nav_menu(
array(
'title_li' => '',
'menu_id' => 'menu',
'menu_class' => '',
'theme_location' => 'primary-menu',
)
); ?>