plz I need help I have a wp_nav_menu which i need to make its child dropdown horizontally the current css code:\[code\] .menu, .menu ul { display: block; list-style-type: none; margin: 0; padding: 0; } .menu li { border: 0; display: table; float: left; margin: 0px 0 0 0; padding: 0; position: relative; z-index: 5; } .menu li:hover { white-space: normal; z-index: 10000; } .menu li li { float: none; } .menu ul { left: 0; position: absolute; top: 0; visibility: hidden; z-index: 10; } .menu li:hover > ul { top: 100%; visibility: visible; } .menu li li:hover > ul { left: 100%; top: 0; } .menu:after, .menu ul:after { clear: both; content: '.'; /*display: block;*/ height: 0; overflow: hidden; visibility: hidden; } .menu, .menu ul { min-height: 0; } .menu ul, .menu ul ul { margin: 0; padding: 0; } .menu ul li a:hover, .menu li li a:hover { color: #484848; text-decoration: none; } .menu ul { min-width: 15em; width: auto; } .menu a { border-left: 1px solid #D7D7D7; border-top: 4px solid #c3c3c3; margin-top: 1px; color: #363636; cursor: pointer; display:table-cell; vertical-align: middle; font-size: 13px; height: 80px; width: 85px; text-align: center; position: relative; text-decoration: none; font-family: arial, helvetica, san-serif; font-weight: bold; text-shadow: 0 1px 1px white; box-shadow-right: 0 1px 1px #fff; } .menu a:hover { border-top: 4px solid #e46600; border-left: 1px solid #CFCFCF; color:#e46600; background: -webkit-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); background: -moz-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); filter: progid
XImageTransform.Microsoft.gradient(startColorstr=#DEDDDD 1%,#DEDDDD 0% , endColorstr=#FCFCFC 80%, #E2E2E290% ); } .menu .current_page_item a, .menu .current-menu-item a { display:table-cell; vertical-align: middle; border-top: 4px solid #e46600; border-left: 1px solid #CFCFCF; color:#e46600; background: -webkit-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); background: -moz-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); filter: progidXImageTransform.Microsoft.gradient(startColorstr=#DEDDDD 1%,#DEDDDD 0% , endColorstr=#FCFCFC 80%, #E2E2E290% ); } .home .menu .current_page_item a { display:table-cell; vertical-align: middle; background: none; background-color: transparent; background-image: none; filter: none; border-top: 4px solid #e46600; border-left: 1px solid #CFCFCF; color:#e46600; background: -webkit-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); background: -moz-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); filter: progidXImageTransform.Microsoft.gradient(startColorstr=#DEDDDD 1%,#DEDDDD 0% , endColorstr=#FCFCFC 80%, #E2E2E290% ); } .menu li li { background: #fff; background-image: none; border: 1px solid #b2b2b2; color: #444; filter: none; margin: -1px 0 1px 0; width: auto; } .menu li li a { background: transparent !important; border: none; color: #444; font-size: 12px; font-weight: 400; height: auto; height: 20px; line-height: 20px; padding: 5px 10px; text-shadow: none; white-space: nowrap;} .menu li li a:hover { background: #f5f5f5 !important; background-image: none; border: none; color: #444; filter: none; } .menu ul > li + li { border-top: 0; } .menu li li:hover > ul { left: 100%; top: 0; } .menu > li:first-child > a { border-left: none; }\[/code\]and the output html is:\[code\]<ul class="menu"> <li class="page_item page-item-21"><a href="http://stackoverflow.com/questions/14412914/#">item1</a></li> <li class="page_item page-item-329"><a href="http://stackoverflow.com/questions/14412914/#">item2</a></li> <li class="page_item page-item-23"><a href="http://stackoverflow.com/questions/14412914/#">item3</a> <ul class="children"> <li class="page_item page-item-345"><a href="http://stackoverflow.com/questions/14412914/#">sub item1</a> <ul class="children"> <li class="page_item page-item-347"><a href="http://stackoverflow.com/questions/14412914/#">sub sub item1</a></li> <li class="page_item page-item-350"><a href="http://stackoverflow.com/questions/14412914/#">sub sub item2</a></li> <li class="page_item page-item-352"><a href="http://stackoverflow.com/questions/14412914/#">sub sub item3</a></li> <li class="page_item page-item-354"><a href="http://stackoverflow.com/questions/14412914/#">sub sub item4</a></li> </ul> </li> </ul> </li> <li class="page_item page-item-18"><a href="http://stackoverflow.com/questions/14412914/#">item4</a></li> <li class="page_item page-item-15"><a href="http://stackoverflow.com/questions/14412914/#">item5</a></li> <li class="page_item page-item-13"><a href="http://stackoverflow.com/questions/14412914/#">item6</a></li> <li class="page_item page-item-11"><a href="http://stackoverflow.com/questions/14412914/#">item7</a></li></ul>\[/code\]Thank you in advance...
XImageTransform.Microsoft.gradient(startColorstr=#DEDDDD 1%,#DEDDDD 0% , endColorstr=#FCFCFC 80%, #E2E2E290% ); } .menu .current_page_item a, .menu .current-menu-item a { display:table-cell; vertical-align: middle; border-top: 4px solid #e46600; border-left: 1px solid #CFCFCF; color:#e46600; background: -webkit-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); background: -moz-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); filter: progidXImageTransform.Microsoft.gradient(startColorstr=#DEDDDD 1%,#DEDDDD 0% , endColorstr=#FCFCFC 80%, #E2E2E290% ); } .home .menu .current_page_item a { display:table-cell; vertical-align: middle; background: none; background-color: transparent; background-image: none; filter: none; border-top: 4px solid #e46600; border-left: 1px solid #CFCFCF; color:#e46600; background: -webkit-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); background: -moz-linear-gradient(top, #DEDDDD 1%,#DEDDDD 0% , #FCFCFC 80%, #E2E2E2 90%); filter: progidXImageTransform.Microsoft.gradient(startColorstr=#DEDDDD 1%,#DEDDDD 0% , endColorstr=#FCFCFC 80%, #E2E2E290% ); } .menu li li { background: #fff; background-image: none; border: 1px solid #b2b2b2; color: #444; filter: none; margin: -1px 0 1px 0; width: auto; } .menu li li a { background: transparent !important; border: none; color: #444; font-size: 12px; font-weight: 400; height: auto; height: 20px; line-height: 20px; padding: 5px 10px; text-shadow: none; white-space: nowrap;} .menu li li a:hover { background: #f5f5f5 !important; background-image: none; border: none; color: #444; filter: none; } .menu ul > li + li { border-top: 0; } .menu li li:hover > ul { left: 100%; top: 0; } .menu > li:first-child > a { border-left: none; }\[/code\]and the output html is:\[code\]<ul class="menu"> <li class="page_item page-item-21"><a href="http://stackoverflow.com/questions/14412914/#">item1</a></li> <li class="page_item page-item-329"><a href="http://stackoverflow.com/questions/14412914/#">item2</a></li> <li class="page_item page-item-23"><a href="http://stackoverflow.com/questions/14412914/#">item3</a> <ul class="children"> <li class="page_item page-item-345"><a href="http://stackoverflow.com/questions/14412914/#">sub item1</a> <ul class="children"> <li class="page_item page-item-347"><a href="http://stackoverflow.com/questions/14412914/#">sub sub item1</a></li> <li class="page_item page-item-350"><a href="http://stackoverflow.com/questions/14412914/#">sub sub item2</a></li> <li class="page_item page-item-352"><a href="http://stackoverflow.com/questions/14412914/#">sub sub item3</a></li> <li class="page_item page-item-354"><a href="http://stackoverflow.com/questions/14412914/#">sub sub item4</a></li> </ul> </li> </ul> </li> <li class="page_item page-item-18"><a href="http://stackoverflow.com/questions/14412914/#">item4</a></li> <li class="page_item page-item-15"><a href="http://stackoverflow.com/questions/14412914/#">item5</a></li> <li class="page_item page-item-13"><a href="http://stackoverflow.com/questions/14412914/#">item6</a></li> <li class="page_item page-item-11"><a href="http://stackoverflow.com/questions/14412914/#">item7</a></li></ul>\[/code\]Thank you in advance...