Javascript 网页内容的优先级，并将一个元素置于另一个元素之前

我对网页内容的优先级有问题。我的意思是我希望一个组件在另一个组件前面。在这里，当我悬停水平菜单时，我希望我的下拉菜单位于其他组件的前面

我希望它在其他组件前面，比如：

以下是我用来编写此下拉菜单的代码：

<div id="horizontalmenu">
<ul>
<li><a href="#">اخبار</a>
<ul>
<li><a href="http://es.sums.ac.ir/newsGilrsElementary">ابتدایی دخترانه</a></li>
<li><a href="http://es.sums.ac.ir/newsGilrsGuidance">راهنمایی دخترانه</a></li>
<li><a href="http://es.sums.ac.ir/newsGilrsHigh">دبیرستان دخترانه</a></li>
<li><a href="http://es.sums.ac.ir/newsBoysElementary">ابتدایی پسرانه</a></li>
<li><a href="http://es.sums.ac.ir/newsBoysGuidance">راهنمایی پسرانه</a></li>
<li><a href="http://es.sums.ac.ir/newsBoysHigh">دبیرستان پسرانه</a></li>
</ul>
</li>
</ul>
</div>
<style type="text/css" media="screen"><!--
#horizontalmenu ul { padding:1; margin:1; list-style:none; }    
#horizontalmenu ul a{ padding:1; margin:1; list-style:none; color:white;}   
        #horizontalmenu li { float:left; position:relative; padding-right:200; display:block;} 
        #horizontalmenu li ul { display:none; position:absolute; width:200px; background:#9a2d91;} 
        #horizontalmenu li:hover ul{ display:block; height:auto; width:200px;background:#9a2d91; } 
        #horizontalmenu li ul li{ clear:both; border-style:none; width:200px;background:#9a2d91;}
--></style>

有人能帮我吗？

CSS:

#horizontalmenu { z-index: 10; }

z-index

表示“高度”，数值越大，越高。默认值为0。

请尝试以下操作：

<div id="div1">
      <img src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Apps-HTML-5-Metro-icon.png"/>
      <div id="div2">
           <img src="http://penta2.ufrgs.br/edutools/composer/tutcomposer3.gif"/>
      </div>
</div>
<style type="text/css">
#div1 {
    position:relative; 
    top:0px; 
    left:0px;
}
#div2 {
    position:absolute; 
    top:60px; 
    left:6px;
}

#第一组{
位置：相对位置；
顶部：0px；
左：0px；
}
#第二组{
位置：绝对位置；
顶部：60px；
左：6px；
}

---

问题出在z-index上，答案是在li标签中添加z-index

<li style="z-index: 98;">

---

非常感谢。

您可以使用z索引属性