我已经用 DIV 制作了这个水平菜单,(根本没有使用 ul 和 li 列表),我正在寻找一种方法来延迟子菜单在鼠标移出时折叠,如果它是使用 javascript、jquery 或CSS。 我尝试了一些 javascript 解决方案,但都没有用。
CSS
.topmenu
{
margin: 0 auto; width: auto;float:left;
position:relative;
z-index:4;
height: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
color:#444;
}
.topmenu a
{
padding:0 16px;
line-height:50px; /*Note: keep this value the same as the height of .topmenu */
font-size:16px;
font-weight:normal;
display:block;
outline:0;
text-decoration: none;
position:relative;
color:#444;
}
.topmenu .home, .topmenu .button1, .topmenu .button2 {float: left;}
.topmenu .home img {vertical-align: top; margin-top:8px; border:none;}
.topmenu .home:hover a, .topmenu .button1:hover a, .topmenu .button2:hover a
{background-color:#333; color:#FFF; z-index:9;}
.topmenu .subhome,
.topmenu .submenu1,
.topmenu .submenu2
{
position: absolute;
right:0;
z-index:20;
display:none;
background-color:#0e5079;
text-align: left;
padding: 20px;
top:50px;
color:#999;
border-radius:3px;
-moz-box-shadow:1px 2px 12px #333333;
-webkit-box-shadow:1px 2px 12px #333333;
box-shadow:1px 2px 12px #333333;
text-shadow:
-1px -1px 0 #333,0px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,0px 1px 0 #333,1px 1px 0 #333;
}
.topmenu .home:hover .subhome {display:block;}
.topmenu .button1:hover .submenu1 {display:block;}
.topmenu .button2:hover .submenu2 {display:block;}
.topmenu .subhome {
width:960px;
height:560px;
background-image:url(menu/menu-bg/corfu-bw-bg.jpg);
background-repeat:no-repeat;
background-position:center;
}
.topmenu .submenu1 {
background-image:url(menu/menu-bg/benitses-bg.jpg);
background-repeat:no-repeat;
background-position:center;
}
.topmenu .submenu2 {
background-image:url(menu/menu-bg/corfu-bg.jpg);
background-repeat:no-repeat;
background-position:center;
}
.topmenu .submenuleft {padding:20px;float:left;}
.topmenu .submenuleft span {font-weight:bold; font-size:16px;color:#DDD;line- height:32px;}
.topmenu .submenuleft a span {font-weight:bold; font-size:16px;color:#FA0;padding- top:5px;padding-bottom:8px;}
.topmenu .submenuleft a span:hover {color:#FF0; text-decoration:none;}
.topmenu .submenuleft a:hover {color:#FF0;font-size:14px;text-decoration:none;background:none;}
.topmenu .submenuleft img {display:block;border:#FFF 2px solid;padding:4px;margin-top:5px;}
.topmenu .subhome .submenuleft a,
.topmenu .submenu1 .submenuleft a,
.topmenu .submenu2 .submenuleft a
{
padding:0px;
line-height:26px;
font-size:14px;
background:none;
display: inline;
text-align:left;
z-index: 0;
}
和 HTML
<div class="topmenu">
<div class="home"><a href="#">HOME</a>
<div class="subhome">
</div>
</div>
<div class="button1"><a href="#">ITEM1</a>
<div class="submenu1" style="width:840px;">
<div class="submenuleft">
<a href="#"><span>LINK TITLE</span></a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a>
</div>
<div class="submenuleft">
<a href="#"><span>LINK TITLE</span></a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a>
</div>
<div class="submenuleft">
<a href="#"><span>LINK TITLE</span></a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a>
</div>
<div class="submenuleft" style="text-align:right;width:130px;">
<img src="menu/benitses-m.jpg" alt="" style="width:128px; height:200px; height:190px;margin-top:5px;">
</div>
</div>
</div>
<div class="button2"><a href="#">ITEM2</a>
<div class="submenu2" style="width:800px;">
<div class="submenuleft">
<a href="#"><span>LINK TITLE</span></a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a>
</div>
<div class="submenuleft">
<a href="#"><span>LINK TITLE</span></a><br>
<a href="#"><span>LINK TITLE</span></a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a>
</div>
<div class="submenuleft">
<a href="#">Example link</a><br>
<a href="#">Example link</a><br>
<a href="#">Example link</a>
</div>
<div class="submenuleft" style="text-align:right; width:140px;">
<img src="menu/mouse-island.jpg" alt="" style="width:140px; height:210px;">
</div>
</div>
</div>
您可以在 [此处][1] 查看此菜单的测试示例
谢谢
[1]:
最佳答案
您可以使用 CSS Transitions。只需使用 visibility
属性来显示和隐藏菜单(而不是在 block
和 none
之间切换 display
),指定它的过渡只会延迟从 visible
到 hidden
的变化,而不是相反。
显然,您还可以创建淡入淡出效果,为 opacity
属性设置动画。
示例代码:
<ul id="menu">
<li>
<a href="">Text</a>
<ul>
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
<li><a href="">E</a></li>
</ul>
</li>
</ul>
CSS:
#menu ul{
visibility: hidden;
position: absolute;
padding: 0;
-moz-transition-property: visibility;
-moz-transition-duration: 2s;
-webkit-transition-property: visibility;
-webkit-transition-duration: 2s;
transition-property: visibility;
transition-duration: 2s;
}
#menu li:hover > ul{
visibility: visible;
}
关于javascript - 延迟关闭专门用 div 制作的 css 菜单上的子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20733255/