如何将下拉菜单更改为下拉菜单

Question

我想我不是第一个问这个问题的人，但我不知所措，不知道该怎么做。（菜单上方有一个横幅，但我想将此图片保密）我应该在此 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>

Answer 1

其实，你只需要做一点小小的改变。当您设置 ul top 值时，您可以只使用 bottom 代替。这将使下拉菜单的底部与菜单按钮的顶部对齐。

#menu ul ul {
    position: absolute;
    bottom: 52px;
    visibility: hidden;
}

Here is a working example

如何将下拉菜单更改为下拉菜单

How to change drop-down to drop-up menu

drop-down-menu