커스텀 멀티 컬럼 드롭 다운 서브 메뉴를 만드는 방법

Question

나는 나의 워드 프레스 사이트에서 이미 드롭 다운 메뉴를 만들었습니다. 그것의 일반적인 드롭 다운 메뉴. 하지만 지금은 멀티 컬럼 드롭 다운 서브 메뉴로 만들 필요가있다. 나는 많은 사이트를 살펴보고 다른 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', 
             ) 
           ); ?>