我在名为 menu_Box2 的 menu_Box 上添加了第二行
第一次尝试 Z-Indexing。
我无法让 menu_Box 下拉菜单出现在 menu_Box2 元素之上。
我尝试了一些不同的 z-Index、溢出和位置值,但没有成功。
我想我可能需要对一些 ul li 元素进行 Z 索引,但由于它们被组合在一起,我很难找出哪些元素。
CSS:
#menu_Box{ /*MENU BOX CONTAINER*/
width: 890px;
height: 100%;
margin: 0 auto;
padding-left: 10px;
z-index:500
}
#menu_Box2{ /*MENU BOX CONTAINER*/
width: 890px;
height: 100%;
margin: 0 auto;
padding-left: 10px;
padding-top:6px;
overflow:visible;
}
#menu_Box ul,
#menu_Box2 ul{ /*MENU BOX STYLE*/
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:rgba(0, 57, 96, .95);
font-size:24px;
font-weight:normal;
padding:0 0 0 8px;
margin:0;
position:relative;
}
.extraStyle{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:rgba(0, 57, 96, .85);
font-size:22px;
font-weight:normal;
padding:0 0 0 7px;
margin:0;
}
#menu_Box ul li,
#menu_Box2 ul li{
display:inline-block;
}
#menu_Box ul li:hover,
#menu_Box ul li a:hover,
#menu_Box2 ul li:hover,
#menu_Box2 ul li a:hover{
color:#456692;
text-decoration:none;
}
#menu_Box ul li a,visited,
#menu_Box2 ul li a,visited{
text-align:left;
color:#263A75;
display:block;
padding: 0 0 0 0; /*Padding between titles*/
text-decoration:none;
}
#menu_Box ul li:hover ul,
#menu_Box ul ul li,
#menu_Box2 ul li:hover ul,
#menu_Box2 ul ul li{
display:block;
}
#menu_Box ul ul,
#menu_Box2 ul ul{ /*Drop Down Box*/
border: 3px solid rgba(0, 57, 96, .85) ;
display:none;
position:absolute;
background-color: rgba(139, 183, 212, .9);
padding: 3px 5px 3px 5px; /*Padding between list items*/
}
#menu_Box ul ul li a,visited,
#menu_Box2 ul ul li a,visited{
color:#263A75;
}
#menu_Box ul ul li a:hover,
#menu_Box2 ul ul li a:hover{
color:#456692;
}
HTML:
<div id="menu_Box"> <!--Menu Box Div-->
<ul>
<li><a href="http://www.enhancedliving.ca/index.php">Services</a>
<ul>
<li><a href="http://www.enhancedliving.ca/index.php#headerH2pk">Psych-K</a> </li>
<li><a href="http://www.enhancedliving.ca/index.php#headerH2fat">Food & Environmental Allergy and Sensitivity Testing</a> </li>
<li><a href="http://www.enhancedliving.ca/index.php#headerH2sne">Supplement and Nutrition Evaluation</a> </li>
<li><a href="http://www.enhancedliving.ca/index.php#headerH2fvt">Food Value Testing</a> </li>
</ul>
</li><span class="extraStyle">::</span>
<li><a href="http://www.enhancedliving.ca/sessions.php">Sessions</a> </li><span class="extraStyle">::</span>
<li><a href="http://www.enhancedliving.ca/bio.php">Biography</a> </li><span class="extraStyle">::</span>
<li><a href="http://www.enhancedliving.ca/forums.php">Health Topics</a>
<!-- <ul>
<li><a href="http://open-source-energy.org/forum/index.php">Open Source Forums</a> </li>
<li><a href="http://open-source-energy.org/forum/index.php">Open Source Forums</a> </li>
</ul>-->
</li><span class="extraStyle">::</span>
<li><a href="http://www.enhancedliving.ca/products.php">Favorite Products</a></li><span class="extraStyle">::</span>
<li><a href="http://www.enhancedliving.ca/contact.php">Contact</a> </li>
</ul>
</div> <!--Close Menu Box Div-->
<div id="menu_Box2"> <!--Menu Box Div-->
<ul>
<li><a href="http://www.enhancedliving.ca">Recipies</a>
</ul>
</div> <!--Close Menu Box Div-->
最佳答案
z-index
属性仅适用于定位元素,因此将 position: relative;
添加到您的 #menu_Box
关于css - Z-Index 下拉菜单未显示在以下 div ul 上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20939473/