如何製作自定義多列下拉子菜單

Question

我已經在我的wordpress網站上做了一個下拉菜單。它是一個常見的下拉菜單。但現在我需要將它作爲多列下拉子菜單。 我經歷了這麼多網站，並嘗試不同的CSS。沒有任何東西會在該參考站點中創建任請幫助我定製現有的CSS樣式以獲得多列子菜單結構。

我當前菜單的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; 
    } 

菜單結構是：

<div id="cssmenu" class="menu"> 
    <ul class="menu"> 
    <li> 
     <ul class="sub-menu"> 
     <li>test1</li> 
      <li>test2</li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

目前我的菜單這樣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', 
             ) 
           ); ?>