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

Stack Overflow用户

提问于 2015-02-04 10:39:23

回答 1查看 597关注 0票数 0

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

drop-down-menu

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-04 10:48:08

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

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

下面是一个有用的例子

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28319244

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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