我找到了一个制作下拉菜单的指南,它说当你停止在主菜单项上悬停时,下拉菜单将保持不变。然而,我的菜单消失了,无法按下项目!
正如你所看到的,音乐菜单位有下拉菜单(或者在这种情况下,"向右下拉")。
Fiddle here:http://jsfiddle.net/Gb2aS/
此处编码:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div ID="menubox">
<ul>
<li><a href="http://folk.ntnu.no/arnstekl/" class="link">Home</a></li>
<li><a href="#" class="link">Music</a>
<ul>
<li><a href="https://soundcloud.com/arnsteinkleven/" class="link">My music</a></li>
<li><a href="http://folk.ntnu.no/arnstekl/gilberto.html" class="link">The Joao Gilberto project</a></li>
</ul></li>
<li><a href="https://www.github.com/arnstein" class="link">Github</a></li>
<li><a href="http://www.flickr.com/photos/92472314@N03/" class="link">Pictures</a></li>
</ul>
</div>
<div ID="circle">
<p ID="title"> A <br> r <br> n <br> s <br> t <br> e <br> i <br> n </p>
</div>
</body>
</HTML>
CSS:
#menubox
{
width: 8%;
height: 30%;
border: 10% solid #C7D93D;
border-radius: 5%;
position: fixed;
margin-top: 12%;
margin-left: 18%;
font-family: Ubuntu, Lucida console, Futura;
list-style: none;
float: left;
}
#menubox ul li a
{
text-align: left;
font-size: 200%;
color: #FFF0A5;
}
#menubox ul li
{
color: #468966;
font-family: Ubuntu, Lucida console, Futura;
float: left;
margin-right: 10px;
position: relative;
}
#menubox ul
{
color: #468966;
font-family: Ubuntu, Lucida console, Futura;
}
#menubox ul ul
{
position: absolute;
left: -9999px;
list-style: none;
}
#menubox ul ul li
{
float: left;
margin-left: 40%;
position: relative;
font-size: 60%;
text-align: left;
}
#menubox ul ul a
{
white-space: nowrap;
}
#menubox ul li:hover a
{
text-decoration: none;
color: #FFB03B;
}
#menubox ul li:hover ul
{
left: 0;
}
#menubox ul li:hover ul a
{
text-decoration: none;
color: #FFB03B;
}
#menubox ul li:hover ul li a:hover
{
color: #FFB03B;
}
div p
{
color: #FFF0A5;
text-align: center;
position: relative;
vertical-align: middle;
display: inline-block;
margin-top: 300px;
line-height: 60px;
}
#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
width: 500px;
height: 500px;
display: block;
position: fixed;
margin-top: 9%;
margin-left: 52%;
text-align: center;
}
#title
{
text-color: #FFF0A5;
font-size: 350%;
display: inline;
text-align: center;
}
body
{
height: 100%;
width: 100%;
background-color: #468966;
font-family: Ubuntu, Lucida console, Futura;
}
.link
{
text-color: #FFF0A5;
text-decoration: none;
text-align: left;
}
问题是因为您的子列表是偏移的,所以光标必须从主菜单项和子菜单通过。这将解决您的问题:
#menubox ul li:hover ul
{
left: 0;
top: 0;
z-index:100;
}
正如Daniel Gimenez在上面解释的那样,子菜单之所以保持可见,是因为它是主ul项的子项,因此如果您将光标保持在子菜单上,浏览器也会将其视为将光标维持在原始菜单项上,并且:hover css会持续存在。
它适用于下拉/弹出菜单,因为即使子对象在物理上显示在其父对象之外,从代码的角度来看,它仍然"在"父对象内部。但是,如果两者之间有任何物理间隙,并且鼠标越过该间隙,则:悬停规则将被禁用,子菜单将消失。
您的css需要大量的内容。所以我把它归结为最基本的东西。我相信你的问题与你的主链接和子菜单之间的差距有关。
CSS解释*锚点是块内联块类型,具有与父级li和ul完全相同的宽度。*子菜单在李的里面。因此,当李在上空盘旋时,他们是可见的。子菜单是可见的,因为它是li的子菜单。*因为锚点是100%的并且拉伸li,所以邻接子菜单,所以当将鼠标移到上面时,没有间隙,所以子菜单仍然可见。
jsFiddle
#menubox {
position: absolute;
left: 100px;
top: 100px;
}
#menubox ul {
display:inline-block;
padding-left:0;
}
#menubox > ul {
width: 100px;
}
#menubox > ul ul {
position:absolute;
display: none;
width: 200px;
}
#menubox li {
list-style-type:none;
display:block;
}
#menubox li:hover {
background:red;
}
#menubox a {
display:inline-block;
width:100%;
}
#menubox ul li:hover ul {
display: inline-block;
background: orange;
}
我在弹出的列表中添加了一些填充,基本上是在它周围创建了一个块。当你的鼠标在这个块上时,它不会消失。
http://jsfiddle.net/Gb2aS/5/
#menubox ul ul
{
position: absolute;
left: -9999px;
padding: 100px;
list-style: none;
}
然而,有一个问题是,绘制的圆圈被放在列表的顶部,但我将把它留给你。
然而,我更喜欢Daniel的解决方案。给链接自己的类是一种更好的处理方式。你最好看看他的解决方案,并根据你的需求进行调整。