0

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/

Zammuuz
  • 708
  • 4
  • 18
  • 43
  • "if my question feel like "do it for me". It does. What have you tried so far. Show us a JSFiddle. – Paulie_D Feb 11 '14 at 12:14
  • i advice you to use superfish plugin. http://plugins.jquery.com/superfish – Sushan Feb 11 '14 at 12:15
  • http://mattgemmell.com/what-have-you-tried/ - we are note a coding site – Marriott81 Feb 11 '14 at 12:16
  • for multi column dropdowns avoid li tags as it can cause problems ciew this fiddle and modify it according to your needs :http://jsfiddle.net/yasinallana/R8FDz/4/embedded/result/ – Dev Man Feb 11 '14 at 13:49
  • @Yasin: hi.. thanks for ur rply. my site is a wordpress site. the menu li 's are created automatically by wordpress when i arrange them in the admin part. – Zammuuz Feb 12 '14 at 03:57
  • You can customise the html structure of your menu if needed. – Dean_Wilson Feb 25 '14 at 21:17

1 Answers1

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',
                                        ) 
                                ); ?>
Hussain
  • 915
  • 6
  • 11