我想我不是第一个问这个问题的人,但是我很茫然,不知道该怎么做。(菜单上方有一个横幅,但我想将此图片保密)。在此CSS中我应该更改什么,以便菜单可以向上移动?请帮助我在项目中需要它,截止日期是今天到午夜。
@charset "utf-8";
#menu {
padding: 0;
margin: 0 auto;
width: 1010px;
}
#menu ul {
padding:0;
margin:0;
line-height:50px;
}
#menu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#F00;
}
#menu ul li a {
text-align:center;
font-family:"Times New Roman", Times, serif;
font-style:oblique;
text-decoration:none;
height: 50px;
width: 200px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#menu ul ul {
position: absolute;
top: 52px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu li:hover {
background:#999;
}
<html><head>
</head>
<body bgcolor="#000" leftmargin="50px" rightmargin="50px">
<div id="menu">
<ul>
<li><a><font size="+3">Paranoja</font></a>
<ul>
<li><a class="smoothScroll" href="#opis etiudy">Opis etiudy</a></li>
<li><a class="smoothScroll" href="#pomysl">Skąd się wziął pomysł etiudy</a></li>
<li><a class="smoothScroll" href="#inspiracje">Insiracje</a></li>
<li><a class="smoothScroll" href="#obejrzyj">Obejrzyj "Paranoję"</a></li>
<li><a class="smoothScroll" href="#caly film">Link do całego filmu</a></li>
</ul>
</li>
<li><a><font size="+3">Obsada</font></a>
<ul>
<li><a class="smoothScroll" href="#aktorzy">Aktorzy</a></li>
<li><a class="smoothScroll" href="#tworcy">Twórcy</a></li>
</ul>
</li>
<li><a><font size="+3">Reżyser</font></a>
<ul>
<li><a class="smoothScroll" href="#o mnie">O mnie</a></li>
</ul>
</li>
<li><a><font size="+3">Galeria</font></a>
<ul>
<li><a class="smoothScroll" href="#kadry">Kadry z filmu</a></li>
<li><a class="smoothScroll" href="#making">Making of</a></li>
</ul>
</li>
<li><a><font size="+3">Kontakt</font></a>
<ul>
<li><a class="smoothScroll" href="#mail">Email</a></li>
<li><a class="smoothScroll" href="#fb">Media społecznościowe</a></li>
</ul>
</li>
</ul>
</body></html>
实际上,您只需要进行一些小的更改。设置该ul
top
值时,可以直接使用bottom
。这将使下拉菜单的底部与菜单按钮的顶部对齐。
#menu ul ul {
position: absolute;
bottom: 52px;
visibility: hidden;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句