一。把div寫到a標籤下面
代碼如下：
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="BehanceLog.WebForm1" %>
<!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 runat="server">
<title></title>
<style type="text/css">
.menu{ display:block; width:200px; height:100px; background-color:Red; margin:20px auto;}
.showdiv{ display:none;}
.menu a{ display:block; background-color:Red; position:relative; width:100px; height:20px;}
.menu a:hover .showdiv
{
background-color:Yellow;
display:block;
position:absolute; z-index:200;
width:300px; height:200px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="menu">
<a href="About.aspx">請點擊我
<div class="showdiv">
<span>在困难的时候企业就是要手拉手，肩并肩，不能想单打独斗，抱团合作是唯一出路。</span>
</div>
</a>
</div>
</form>
</body>
</html>
复制代码
說明如下：
1.先寫一個大的div menu包含a標籤，其實沒有也可以。這裡為了測試加上了。
2.定義a標籤，並且裏面包括要顯示的div
3.寫css
3.1 首先應該把要彈出的div進行設置
.showdiv{ display:none; }
3.2 定義a標籤，使產生浮動，為 了彈出的div確定位置
.menu a{ position:relative; }
3.3下a標籤的hover
.menu a:hover .showdiv
{
background-color:Yellow;
display:block;
position:absolute; z-index:200;
width:300px; height:200px;
}
3.4其他說明
彈出的div，最好設置背景，要不看不清楚。
postion 一定要設置，要不會把其他 數據推開。
z-index 一定要設置，要不會被其他div蓋住。
這樣就出現了效果。可以直接拷貝我的代碼運行。
二。div 寫到和a標籤同級
代碼如下：
View Code
分享到：
相关推荐
整理div+css弹出层，带关闭按钮供大家参考
这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html，十分灵活。另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的...
多款css3-弹出窗口弹出效果，文件为DEMO，集合多种弹窗效果。
jquery仿淘宝顶部的css弹出层效果
css js 弹出框
基于animate.css弹出框弹出关闭特效 （5星级）：http://blog.csdn.net/libin_1/article/details/50450782
2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or ...
纯css弹出导航，仿京东商城商品导航效果。超酷的css弹出式菜单
div+css实现的点击弹出层的效果。兼容谷歌，火狐，IE6以上等浏览器
刚开始学css
css + div 滑动弹出div效果，可自定义弹出效果。
CSS+JS弹出窗口，点击按钮弹出div小窗口，好用实在
利用 css3 jquery 弹出层实现漂亮的弹出层
素材简介：css3带阴影弹出窗口是一款基于css3 jquery实现的类似lightbox弹出界面的效果。
多种风格的HTML5 CSS弹出层特效，可以自定义整体容器宽高度及内容，高度可自适应可固定,样式可以自定义，可关闭，简单修饰成了圆角样式，几种弹出层外观上区别不大，区别是动画显示的方式不同，有的从上到下显示、有...
纯CSS实现div弹出对话框 可以应用于C#，.net 里面。 页面比较好看。
div+css制作的弹出菜单
css3点击弹出登录表单界面代码
利用div+css制作弹出层并遮罩层，主用用了两个div，一个div用于弹出框，另一个则遮罩整个页面
Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面