<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 当前页面的三要素 -->
<title>html零基础快速制作网页弹出窗口</title>
<meta name='Keywords' content="html,弹出窗口">
<meta name='description' content="">
<style type="text/css">
* {margin:0;padding 0}
img {border:0;}
.adv{width:460px;height:314px;border:1px solid #D8D8D8;margin:0 auto;display:none;border-radius:6px}
.adv_top{width:460px;height:56px;background:url('images/1.jpg')}
.adv_hd{width:460px;height:56px;line-height:56px;padding-top:15px;padding-right:5px}
.adv_hd a {font-size:12px;color:#000000 ;background:url('images/2.jpg') no-repeat;width:29px;
height:24px;float:right;text-decoration:none;}
.adv_hd a:hover{width:29px;height:24px;background:url('images/3.jpg') no-repeat; }
.menu ul li{list-style:none;float:left;}
/* 行内元素设置高度不起作用必须变为块级元素才有用 */
.menu ul li a {display:block;height:67px;line-height:67px;text-decoration:none;padding:0 25px 0 25px;color:#222;}
.menu ul li a:hover{background:#2578d8}
/* 清除浮动
none:默认值。允许两边有浮动对象
left：不允许左边有浮动对象
right：不允许左边有浮动对象
both：左右两侧不允许有浮动对象
*/
.picture { width:100%;height:470px;clear:both;border:1px solid #D8D8D8;text-align:center}
.menu {border:1px solid #D8D8D80;position:relative;}
.qq span {color:#ff5f25;}
.qq {float:right;}
/*绝对定位 */
.menu_list {background:#CCCCFF;position:absolute;
/*透明技术兼容所有浏览器 */
opacity:0.9;filter:alpha(opacity=90);display:none;z-index:99999}
.web{width:800px;height:200px;}
.seo{width:500px;height:300px;}
.sem{width:300px;height:200px;}
/*父div元素，防止内部元素因浏览器窗口缩小而换行*/
.father {
width:1200px;
height:600px;
margin:0 auto;
}
</style>
</head>
<body>
<a href="#" </a>
<div class="adv" id="myadv">
<div class="adv_top">
<div class="adv_hd">
<a href="#" title="关闭" onclick="$('#adv').hide();$('div#layer').remove();"></a>
</div>
</div>
<div class="">
<img alt="登录" src="images/4.jpg" height="463px" width="525px">
</div>
</div>
<div>
</div>
<!--导航-->
<div class="father">
<div class="qq">qq咨询：<span>934033381</span></div>
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">FLASH</a></li>
<li class="flip">
<a href="#">网页制作</a>
<div class="menu_list web">二级导航</div>
</li>
<li class="flip">
<a href="#">SEO培训</a>
<div class="menu_list seo">二级导航</div>
</li>
<li class="flip">
<a href="#">网络营销</a>
<div class="menu_list sem">二级导航</div>
</li>
</ul>
</div>
<div class="picture">
<img src="js/1.jpg" />
</div>
</div >
<!--第三方视频html代码 -->
<div>
<embed src="http://player.youku.com/player.php/Type/Folder/Fid/26181344/Ob/1/sid/XMTM2MDI3ODQwOA==/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>
</div>
<!-- 引入Jquery-->
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" >
$(function(){
$(".menu .flip").hover(function(){
$(this).children(".menu_list").slideDown();}
,function(){
$(this).children(".menu_list").slideUp();
});
});
</script>
</body>
</html>
本文出自 “点滴积累” 博客，请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1708423