美好的一天，我在博客上创建了一个博客，并从CSS-Tricks https://css-tricks.com/long-dropdowns-solution/中添加了一些下拉菜单代码。我尝试更改位置和z-index代码，但无法阻止其将内容下推。我已经阅读了教程，并为该位置应用了绝对，相对和固定选项，甚至更改了z索引号，但仍然找不到解决方法。下拉菜单在普通菜单上起作用，但长期以来，照片还是一团糟。
这是我的博客https://treeplantersph.blogspot.com/。下拉菜单非常有用，因为它在没有滚动条的情况下可以上下移动。对观众真的很有帮助。非常感谢您提供解决我的博客问题的建议。
这是我使用的代码：
<style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index:6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
* { margin: 0; padding: 0; }
body { font: 15px Helvetica, Sans-Serif; }
html { overflow-y: scroll; }
#page-wrap { width: 720px; margin: 25px auto; }
p { margin: 0 0 8px 0; }
a { text-decoration: none; }
img { vertical-align: middle; }
a img { border: 0; 180}
ul { list-style: none; }
h1 { margin: 0 0 10px 0; }
</style>
<link rel="stylesheet" href="https://css-tricks.com/examples/LongDropdowns/css/style.css" type="text/css" media="screen, projection"/>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript" language="javascript" src="https://css-tricks.com/examples/LongDropdowns/js/jquery.dropdown.js"></script>
<div id="page-wrap">
<ul class="dropdown">
<li><a href="#">Really Tall Menu<img src="https://css-tricks.com/examples/LongDropdowns/images/down-arrow.png" /></a>
<ul class="sub_menu">
<li><a href="#">Artificial Turf</a></li>
<li><a href="#">Benches & Bleachers</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Dugouts</a></li>
<li><a href="#">Fencing & Windscreen</a></li>
<li><a href="#">Floor Protectors</a></li>
<li><a href="#">Foul Poles</a></li>
<li><a href="#">Netting</a></li>
<li><a href="#">Outdoor Furniture & Storage</a></li>
<li><a href="#">Outdoor Signs</a></li>
<li><a href="#">Padding</a></li>
<li><a href="#">Scoreboards</a></li>
<li><a href="#">Shade Structures</a></li>
<li><a href="#">Artificial Turf</a></li>
<li><a href="#">Benches & Bleachers</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Dugouts</a></li>
<li><a href="#">Fencing & Windscreen</a></li>
<li><a href="#">Floor Protectors</a></li>
<li><a href="#">Foul Poles</a></li>
<li><a href="#">Netting</a></li>
<li><a href="#">Outdoor Furniture & Storage</a></li>
<li><a href="#">Outdoor Signs</a></li>
<li><a href="#">Padding</a></li>
<li><a href="#">Scoreboards</a></li>
<li><a href="#">Shade Structures</a></li>
<li><a href="#">Artificial Turf</a></li>
<li><a href="#">Benches & Bleachers</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Dugouts</a></li>
<li><a href="#">Fencing & Windscreen</a></li>
<li><a href="#">Floor Protectors</a></li>
<li><a href="#">Foul Poles</a></li>
<li><a href="#">Netting</a></li>
<li><a href="#">Outdoor Furniture & Storage</a></li>
<li><a href="#">Outdoor Signs</a></li>
<li><a href="#">Padding</a></li>
<li><a href="#">Scoreboards</a></li>
<li><a href="#">Shade Structures</a></li>
</ul>
</li>
<li><a href="#">Kinda Tall Menu</a>
<ul class="sub_menu">
<li><a href="#">Artificial Turf</a></li>
<li><a href="#">Benches & Bleachers</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Dugouts</a></li>
<li><a href="#">Fencing & Windscreen</a></li>
<li><a href="#">Floor Protectors</a></li>
<li><a href="#">Foul Poles</a></li>
<li><a href="#">Netting</a></li>
<li><a href="#">Outdoor Furniture & Storage</a></li>
<li><a href="#">Outdoor Signs</a></li>
<li><a href="#">Padding</a></li>
<li><a href="#">Scoreboards</a></li>
</ul>
</li>
<li><a href="#">Average Menu</a>
<ul class="sub_menu">
<li><a href="#">Artificial Turf</a></li>
<li><a href="#">Benches & Bleachers</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Dugouts</a></li>
<li><a href="#">Fencing & Windscreen</a></li>
</ul>
</li>
<li><a href="#">No Menu</a>
</li>
</ul>
</div>
答案 0 :(得分：-1)
尝试以下CSS：
<style>
ul.dropdown { z-index: 9; }
</style>