Question

我有一个垂直菜单，可以使用jquery打开子菜单。有没有办法让子菜单在同一行打开，如下所示：

ITEM
ITEM SUBITEM1 SUBITEM2
ITEM

这是我的代码：
的CSS：

#menu-main { margin: 0;  padding: 0; position:absolute; top:107px;}
#menu-main li{ list-style: none; position:relative; 
height:25px;
        margin:0 2px;
        padding:20px 5px 0 10px;
        color:#FFFFFF;
        font-weight:bold;
        font-size:36px;
        text-transform:uppercase;
        clear: left;}
#menu-main li a{   
background: #000; text-decoration: none; padding: 1px 1px;
z-index:1001;}
#menu-main li a:link, 
    #menu-main li a:visited, 
    #menu-main li a:active {

        text-decoration:none;
        color:#FFFFFF;
    }
#menu-main li a:hover {background: #000; color: white; padding: 1px 6px;}

#menu-main li ul{list-style: none; none; margin: 0; padding: 0; display:none; float:left; z-index:1002; position:absolute;  left:100%; top:0px;}

#menu-main li ul li {float:left; display:inline;}

#menu-main li ul li a:hover {display:inline-block; background: #000; padding: 0px 0px;}

#menu-main li ul li a:link, 
    #menu-main li ul li a:visited, 
    #menu-main li ul li a:active { color:#0CF;}

#menu-main li ul li a:hover{ opacity:1;}


#menu-main > li{   margin-left:0px;}

javascript：

$(document).ready(function(){ 

// MENU SCRIPT

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('display', 'inline-block');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('display', 'none');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}



$('#menu-main > li').bind('mouseover', jsddm_open)
$('#menu-main > li').bind('mouseout',  jsddm_timer)


document.onclick = jsddm_close;

});

提前感谢您的帮助

垂直菜单与水平

0 个答案: