求各大神给个案例,鼠标单击图标出现下拉菜单选项,div+css.... 谁会用DIV+CSS+JS做下拉列表,就是鼠标滑过就出现.....

作者&投稿:弋饲 (若有异议请与网页底部的电邮联系)

上面那个是我做的效果。。。。不知道你能看明白了么。

 

鼠标经过上面的  出来下面的;

 

离开就隐藏。。。。。。

 

给你代码 你看看。。。。

 

 



单击出现下拉列表,双击下拉列表消失。。



你去懒人图库里找下,这种案例多了去了。下载下来后你结合一楼兄弟给你的解释,自己领悟下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
.nav{ width:980px; height:47px; margin:0 auto;}
.nav_l,.nav_r{ width:7px; height:47px;}
.nav_l{ margin-left:3px; background:url(../templets/images/nav_l.gif) no-repeat;}
.nav_r{ background:url(../templets/images/nav_r.gif) no-repeat;}
.nav_m{ width:960px; height:47px; background:url(../templets/images/nav_m.gif) repeat-x;}
.nav_m ul li{ float:left; width:113px; height:47px; text-align:center; position:relative; margin:0; padding:0; list-sytle:none;}
.nav_m ul li ul { display:none; background:url(../images/nav_m.gif) repeat-x;}
.nav_m ul li:hover ul { display:block; width:110px; height:47px; position:absolute; left:-30px;}
.nav_m ul li:hover ul li{ display:block; clear:both;text-align:left;font-size:12px;}
.nav_m ul li ul li a{ width:107px; height:47px; line-height:47px; color:#000; font-size:14px; font-weight:bold; display:block; text-align:center;}
.nav_m ul li ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>

<body>
<div class="nav">
<div class="nav_l fl"></div>
<div class="nav_m fl">
<ul>
<li><a href="/index.html">首页</a>
<ul>
<li><a href="/gsjj/dtjs/index.html">公司简介</a></li>
<li><a href="/xwzx/index.html">新闻中心</a></li>
<li><a href="/cpzx/index.html" >产品中心</a></li>
<li><a href="/jjfa/index.html">解决方案</a></li>
<li><a href="/qdgl/qdzc/index.html">渠道管理</a></li>
<li><a href="/zczx/index.html">支持中心</a></li>
<li><a href="/lxwm/lxfs/index.html">联系我们</a></li>
</ul>
</li>
</ul>
</div>
</div>

</body>
</html>

给你找了个例子,你把文字换成按钮图片就成。希望采纳哦。

写一个ul
<ul>
<li>test1</li>
<li>test2</li>
</ul>
给这个ul进行绝对定位,z-index设置稍微高点,就可以看到放在了上层;至于点击的当然是用js了

html+css+javascript 菜单单击式下拉菜单怎么弄?~

【方法步骤】:
写好HTML代码以实现下拉菜单。

在网页上看到初步效果。

添加JavaScript代码实现功能,hide()函数实现display的隐藏。

在HTML代码中引用show()和hide()函数。

CTR+S保存代码,在浏览器中F5刷新网页查看效果。
【其他方法】:
利用Html5+css实现的下拉菜单炫酷效果。*{margin: 0;padding: 0;}#nav{background-color: #EEEEEE;height: 40px;

使用JavaScript实现下拉菜单的效果。
通过JQuery方法实现的下拉菜单的炫酷效果。
【注意事项】:记得CTR+S常记得保存的备份,F5刷新网页。

第一种方法:



#rr{ width:500px; height:30px; list-style:none; padding:0;}
#rr li.dd{ float:left; margin-right:10px; margin-left:0; border:1px solid red; width:70px; text-align:center;}
#rr li.dd #tt{ list-style:none; padding:0; margin-left:0; display:none; margin-top:20px; width:70px;}


function onMouseover()
{
var obj=document.getElementById("tt");
obj.style.display="block";
}
function onMouseout()
{
var obj=document.getElementById("tt");
obj.style.display="none";
}




产品

避孕套
伟哥
充气娃娃


首页
首页
首页




第二种方法:利用Jquery


$(document).ready(function(){
$('#gg').hover(function(){
$('#tt').css('display','block');},function(){
$('#tt').css('display','none');
});
});

...刚才点过鼠标的右键,如对着一个图标点右键,求大神解决
答:有搞恶用的病毒的可能,前段时间外国搞愚人节最流行这种病毒,你可能访问了外国站,建议先安全模式杀毒一遍,然后重装系统,是用光盘装(不是用电脑备份恢复),装完后,再安全模式杀毒 如果上述不能解决,可能是电脑驱动问题,建议重装一下驱动,其实将笔记本自带鼠标去掉,的确可以省去很多麻烦 如果还没...

为什么我家鼠标明明点一个图标却把桌面的都打开了不管干什么都是这...
答:有可能是你键盘的shift键按下了没有弹上来,你可以把shift和ctrl健按几下再试试

请大神帮忙做一个后台鼠标单击脚本
答:如果想在窗口最小化的时候,点击(55,66)这个位置,就要在运行该窗口,然后去读内存,才可以实现你的要求。

为什么鼠标总是单击后选择很多选项拜托各位大神
答:楼主,你好 , 你的情况是因为鼠标和键盘乱码了出现的 。 你可以切换下你的输入法 ,或者按下你的ESC键 、 不行的话 关掉你的电脑 拔掉鼠标和键盘 ,然后再插上 看看效果 希望给你带来帮助

电脑不知道怎么回事,点一下图标,就自动点到了另外一个图标,求大神...
答:是鼠标出问题了,换个鼠标试试。

在win8.1系统中,鼠标右击后,没有文字了,但是图标有的,貌似透明了一样...
答:为不显示状态条,“1”为显示状态条),重启系统,看看是不是出来了。你好!首页,输入法消失的原因可能是输入法进程未启动、输入法被删除等。解决办法很简单,给你推荐腾讯电脑管家吧。1.打开管家->>电脑诊所;2.在<系统综合>里有一个输入法,点击它;3.最点击“立即修复”,你的问题便可以解决。

鼠标移到图片上面自动换成另一个图片如何实现(请大神给淘宝店能用...
答:你是想用JS实现呢还是CSS实现?CSS实现代码:a:{background:url(1.jpg);} a:hover{background:url(2.jpg)} 最好不要用CSS,因为他只能用在a标签上,用在别的标签上,有的可以实现,但是有的浏览器不兼容。JS代码: var oImg = document.getElementById('oImg');oImg.onmouseover = functi...

电脑鼠标双击桌面任何图标都指向第一个,求大神指教
答:键盘里进东西卡住键了,把键盘反过来拍几下,或者仔细检查下键盘缝隙里。

新建一个窗体,程序运行时,当勇鼠标单击窗体任一个地方,程序弹出Input...
答:Private Sub Form_Click()Dim i%, a%(15)For i = 1 To 15 a(i) = Val(InputBox("Input No." & i))Next For i = 1 To 15 Print a(i);If i Mod 5 = 0 Then Print Next End Sub

求大神帮忙,在PPT中当鼠标停留在文字上的时候,文字突出显示的效果怎么...
答:纯ppt的技术是达不到的。不过你可以利用“动作设置”的超级链接来做一个伪效果。意思是做2张幻灯片,在两张幻灯片中,插入相同文字,第2张文字突出显示。在第1张的文字上罩一个透明的矩形,选中这个矩形——动作设置——鼠标移过:超级链接到第2页;在第2张的文字上同样罩一个透明的矩形,选中这个...