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

尤克拉斯

我想我不是第一个问这个问题的人,但是我很茫然,不知道该怎么做。(菜单上方有一个横幅,但我想将此图片保密)。在此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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

如何将导航下拉菜单从悬停更改为单击

来自分类Dev

如何将下拉菜单从悬停更改为 onclick

来自分类Dev

将CSS垂直下拉菜单更改为水平

来自分类Dev

将bootstrap下拉菜单更改为hamburger图标?

来自分类Dev

将下拉菜单从悬停更改为单击

来自分类Dev

在下拉菜单中更改颜色,其中jQuery更改为乘以下拉菜单

来自分类Dev

如何将Bootstrap下拉菜单与触发按钮对齐

来自分类Dev

如何将导航链接移到下拉菜单中

来自分类Dev

如何将导航集中在下拉菜单上?

来自分类Dev

如何将下拉菜单项居中?

来自分类Dev

如何将按钮变成下拉菜单?

来自分类Dev

如何更改 GTK 的“下拉菜单”的颜色?

来自分类Dev

如何对齐下拉菜单?

来自分类Dev

如何制作下拉菜单

来自分类Dev

更改为Bootstrap下拉菜单透明背景颜色

来自分类Dev

在C#中将链接更改为下拉菜单

来自分类Dev

如何将Bootstrap下拉样式应用于MVC剃刀中的下拉菜单

来自分类Dev

将悬停更改为Onclick切换下拉菜单

来自分类Dev

Shopify-将尺寸变体从选择下拉菜单更改为按钮

来自分类Dev

将下拉菜单更改为<div>,反之亦然,使用jQuery调整大小?

来自分类Dev

通过多个下拉菜单将页面上的文本更改为SQL结果

来自分类Dev

将字段更改为下拉菜单后,ADO代码不再执行复制/粘贴

来自分类Dev

将悬停更改为Onclick切换下拉菜单

来自分类Dev

WooCommerce:将类别复选框更改为下拉菜单

来自分类Dev

如何将选项选项卡式菜单添加到大型下拉菜单?

来自分类Dev

检测下拉菜单

来自分类Dev

角度的下拉菜单

来自分类Dev

动态下拉菜单

Related 相关文章

热门标签

归档