<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').slideDown('show');
$(this).find('a').addClass('active');
},function(){
$(this).find('.subnav').slideUp('fast');
$(this).find('a').removeClass('active');
});
});
</script>
<style type="text/css">
.body{
width:950px;
margin:10px auto;
font:14px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
border:1px solid #333;
}
ul#navigation{
list-style-type:none;
background:#CE0100;
height:63px;
font-size:24px;
}
ul#navigation li{
float:left;
width:175px;
text-align:center;
position:relative;
height:63px;
padding:20px 5px 10px 5px;
}
ul#navigation li a{
color:#fff;
text-decoration:none;
display:block;
}
ul#navigation li a:active{
border:1px solid blue;
}
.subnav{
background:#E7F1D2;
width:175px;
clear:both;
display:none;
position:absolute;
top:63px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
border-radius:8px;
border-left:2px solid #998;
borfer-right:2px solid #998;
border-bottom:2px solid #998;
}
.subnav li{
clear:both;
height:20px;
padding:0;
text-align:center;
margin:0px;
}
.subnav li a{
background:none;
font-size:18px;
color:#333;
text-decoration:none;
padding:10px 0;
border:none;
}
.subnav li a:hover{
background:#DBF1AD;
font-size:18px;
color:#333;
border:none;
}
</style>
</head>
<body>
<div id="header">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">Our Work</a>
<ul class="subnav">
<li><a href="">Example 1</a></li>
<li><a href="">Example 2</a></li>
<li><a href="">Example 3</a></li>
</ul>
</li>
<li><a href="">Services</a>
<ul class="subnav">
<li><a href="">Services 1</a></li>
<li><a href="">Services 2</a></li>
<li><a href="">Services 3</a></li>
</ul>
</li>
<li><a href="">About us</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#navigation li').hover(function(){
$(this).find('.subnav').slideDown('show');
$(this).find('a').addClass('active');
},function(){
$(this).find('.subnav').slideUp('fast');
$(this).find('a').removeClass('active');
});
});
</script>
<style type="text/css">
.body{
width:950px;
margin:10px auto;
font:14px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
border:1px solid #333;
}
ul#navigation{
list-style-type:none;
background:#CE0100;
height:63px;
font-size:24px;
}
ul#navigation li{
float:left;
width:175px;
text-align:center;
position:relative;
height:63px;
padding:20px 5px 10px 5px;
}
ul#navigation li a{
color:#fff;
text-decoration:none;
display:block;
}
ul#navigation li a:active{
border:1px solid blue;
}
.subnav{
background:#E7F1D2;
width:175px;
clear:both;
display:none;
position:absolute;
top:63px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
border-radius:8px;
border-left:2px solid #998;
borfer-right:2px solid #998;
border-bottom:2px solid #998;
}
.subnav li{
clear:both;
height:20px;
padding:0;
text-align:center;
margin:0px;
}
.subnav li a{
background:none;
font-size:18px;
color:#333;
text-decoration:none;
padding:10px 0;
border:none;
}
.subnav li a:hover{
background:#DBF1AD;
font-size:18px;
color:#333;
border:none;
}
</style>
</head>
<body>
<div id="header">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">Our Work</a>
<ul class="subnav">
<li><a href="">Example 1</a></li>
<li><a href="">Example 2</a></li>
<li><a href="">Example 3</a></li>
</ul>
</li>
<li><a href="">Services</a>
<ul class="subnav">
<li><a href="">Services 1</a></li>
<li><a href="">Services 2</a></li>
<li><a href="">Services 3</a></li>
</ul>
</li>
<li><a href="">About us</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</body>
</html>
3546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
