Добрый день, я сделал блог на блоггере и добавил несколько выпадающих кодов меню от CSS-Tricks https://css -tricks.com / long-dropdowns-solution / .Я попытался изменить коды позиции и z-index, но не могу заставить его перестать толкать контент вниз.Я прочитал учебники и применил абсолютные, относительные и фиксированные параметры для позиции и даже изменения чисел z-index, все еще не могу найти, как это исправить.Раскрывающееся меню работает в среднем меню, но на долгое время оно портит фотографию.
Это мой блог 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>