Question

我想我不是第一个提出这个问题的人，但我很遗憾，不知道该怎么做。（菜单上方有一个横幅，但我想将这张照片保密）我应该在这个css中更改什么，以便菜单可以向上移动？请帮助我为一个项目需要它，截止日期是今天到午夜。

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 1

实际上，你只需做一个小改动。设置ul top值后，您只需使用bottom即可。这将导致下拉列表的底部与菜单按钮的顶部对齐。

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

Here is a working example

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

1 个答案: