延迟关闭的子菜单在css菜单专门用divs [英] Delay closing of submenu on a css menu made exclusively with divs
本文介绍了延迟关闭的子菜单在css菜单专门用divs的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我做了这个水平菜单与DIV，（没有ul和李列表使用），我正在寻找一种方法来延迟鼠标出来的子菜单的合并，不介意，如果它是与javascript，jquery或CSS。
i尝试了一些javascript解决方案，但没有工作。
i have made this horizontal menu with DIVs, (no ul and li lists used at all), i am looking for a way to delay the colapse of the submenus on mouse out, dont mind if it is with javascript, jquery or CSS. i tried some javascript solutions but none worked.
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>
谢谢
推荐答案
可以使用CSS Transitions。只需使用 visibility 属性来显示和隐藏菜单（而不是在之间切换显示 / code>和 none ），指定转换时，您会将更改从可见 隐藏，而不是相反。
You can, using CSS Transitions. Just use visibility property to show and hidden the menu (instead of switching display between block and none), specifying the transition on it you'll delay the change from visible to hidden only, not the inverse.
显然，你也可以创建一个淡入淡出效果，动画 opacity 属性。
Obviously you can also create a fade effect, animating the opacity property.
实例： http://jsfiddle.net/KVtV7/
示例代码：
<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;
}
这篇关于延迟关闭的子菜单在css菜单专门用divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
