求各大神给个案例,鼠标单击图标出现下拉菜单选项,div+css..._百度...
发布网友
发布时间:2024-10-16 06:03
我来回答
共4个回答
热心网友
时间:2024-10-16 06:30
上面那个是我做的效果。。。。不知道你能看明白了么。
鼠标经过上面的 出来下面的;
离开就隐藏。。。。。。
给你代码 你看看。。。。
热心网友
时间:2024-10-16 06:33
你去懒人图库里找下,这种案例多了去了。下载下来后你结合一楼兄弟给你的解释,自己领悟下。
<!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>
给你找了个例子,你把文字换成按钮图片就成。希望采纳哦。
热心网友
时间:2024-10-16 06:32
写一个ul
<ul>
<li>test1</li>
<li>test2</li>
</ul>
给这个ul进行绝对定位,z-index设置稍微高点,就可以看到放在了上层;至于点击的当然是用js了
热心网友
时间:2024-10-16 06:28
单击出现下拉列表,双击下拉列表消失。。