HTML菜单出现在每个浏览器中HTML选择标记的后面

-3

我创建了一个简单的HTML菜单。菜单下有一个下拉列表。HTML菜单出现在每个浏览器中HTML选择标记的后面

当下拉列表元素展开后，我正在尝试浏览菜单时，子菜单出现在下拉列表的后面。

我也尝试玩z-index，但它不起作用。

我的HTML：

<ul id="menu"> 
    <li> 
     <a href="#">Menu 1</a> 

     <ul class="sub-menu"> 
      <li> 
       <a href="#">Sub Menu 1</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 2</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 3</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 4</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Menu 2</a> 
    </li> 
    <li><a href="#">Menu 3</a> 
    </li> 
    <li><a href="#">Menu 4</a> 
     <ul class="sub-menu"> 
      <li> 
       <a href="#">Sub Menu 1</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 2</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 3</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 4</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Menu 5</a> 
    </li> 
</ul> 
<select id="tradeType"> 
    <option value=""></option> 
    <option selected="selected" value="EQ">EQ</option> 
    <option value="FI">FI</option> 
</select>

我的CSS：

/*Initialize*/ 
ul#menu, ul#menu ul.sub-menu { 
    padding:0; 
    margin: 0; 
} 
ul#menu li, ul#menu ul.sub-menu li { 
    list-style-type: none; 
    display: inline-block; 
} 
/*Link Appearance*/ 
ul#menu li a, ul#menu li ul.sub-menu li a { 
    text-decoration: none; 
    color: #fff; 
    background: #666; 
    padding: 5px; 
    display:inline-block; 
} 
/*Make the parent of sub-menu relative*/ 
ul#menu li { 
    position: relative; 
} 
/*sub menu*/ 
ul#menu li ul.sub-menu { 
    display:none; 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 100px; 
} 
ul#menu li:hover ul.sub-menu { 
    display:block; 
}

我创建了一个捣鼓这个problem.Please来看一下，它 http://jsfiddle.net/yoxjgL82/

来源

2014-09-04 megamind

欢迎SO！请在线添加一个最小样本，而不仅仅是异地。请参阅http://stackoverflow.com/help/how-to-ask – bacar 2014-09-04 07:32:50

你能试试吗？

HTML

<a href="#" class="first">Menu 1</a>

jQuery的

$('document').ready(function(){ 
    $('.first').hover(function(){ 
     $('select').addClass('select'); 
    }); 
    $('.first').mouseout(function(){ 
     $('select').removeClass('select'); 
    }); 
});

CSS

.select{ 
    display:none; 
}

编辑

HTML

<select id="tradeType"> 
     <option value=""></option> 
     <option selected="selected" value="EQ">EQ</option> 
     <option value="FI">FI</option> 
    </select> 

    <select id="tradeTypes" style="display:none"> 
     <option selected="selected" value="EQ">EQ</option> 
    </select> 

    <ul id="menu"> 
     <li> 
      <a href="#" class="first">Menu 1</a>

jQuery的

$('document').ready(function(){ 
    $('.first').hover(function(){ 
     console.log('hi');   
     $('#tradeType').addClass('select'); 
     $("#tradeTypes").css('display','block'); 
    }); 
    $('.first').mouseout(function(){ 
     $('#tradeType').removeClass('select'); 
     $("#tradeTypes").css('display','none'); 
    }); 
    $('#tradeType').change(function(){ 
     $('#tradeTypes').html('<option value="'+$("#tradeType option:selected").val()+'">'+$("#tradeType option:selected").text()+'</option>'); 
    }); 
});

CSS

.select{ 
    display:none; 
}

来源

2014-09-04 06:33:53

谢谢。它工作正常，但不接受此修复程序，因为它隐藏了下拉列表的列表。我想在下拉列表的顶部显示菜单 – megamind 2014-09-04 06:38:57

你可以在小提琴中更新吗？ – 2014-09-04 06:41:39

更新了小提琴。 http://jsfiddle.net/yoxjgL82/2/ – megamind 2014-09-04 06:44:13

解决了这个问题。 jquery提供了一个下拉列表。 HTML菜单位于下拉列表的上方。只需要包括jQuery的ui.js V 1.11.1

需要改变的js代码

JS代码 $("#tradeType").selectmenu();

http://jsfiddle.net/7pxms7b2/

来源

2014-09-04 09:11:25 megamind

HTML菜单出现在每个浏览器中HTML选择标记的后面

回答

相关问题