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選擇標記的後面

回答

相關問題