<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Menu._Default" %>
<!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>
</head>
<style type="text/css" runat="server">
ul#topnav
{
margin: 0;
padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
font-size: 1.2em;
background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li
{
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a
{
padding: 2px 2px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover
{
background: #1376c9 url(topnav_active.gif) repeat-x;
}
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/
ul#topnav li span
{
float: left;
padding: 2px 0;
position: absolute;
left: 0;
top: 30px;
display: none; /*--Hide by default--*/
width: 970px;
background: #1376c9;
color: #fff; /*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 1px;
-khtml-border-radius-bottomright: 1px;
-webkit-border-bottom-right-radius: 1px; /*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 1px;
-khtml-border-radius-bottomleft: 1px;
-webkit-border-bottom-left-radius: 1px;
}
ul#topnav li:hover span
{
display: block;
}
/*--Show subnav on hover--*/
ul#topnav li span a
{
display: inline;
}
/*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover
{
text-decoration: underline;
}
</style>
<body>
<form id="form1" runat="server">
<div style="background-color: Black; width: 960px; height: 110px;">
<ul id="topnav">
<li><a href="#">My Home</a></li>
<li>
<a href="#">Projects</a>
<span><a href="#">Subnav Link</a>
<a href="#">SubnavLink</a>
<a href="#">Subnav Link</a>
</span>
</li>
<li><a href="#">Backlogs</a>
<span><a href="#">Subnav Link</a>
<a href="#">SubnavLink</a>
<a href="#">Subnav Link</a>
</span>
</li>
<li><a href="#">Defects</a>
<span><a href="#">Subnav Link</a>
<a href="#">SubnavLink</a>
<a href="#">Subnav Link</a>
</span>
</li>
<li><a href="#">Reports</a>
<span><a href="#">Subnav Link</a>
<a href="#">SubnavLink</a>
<a href="#">Subnav Link</a>
</span>
</li>
</ul>
</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background': '#1376c9 url(topnav_active.gif) repeat-x' }); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
}, function() { //on hover out...
$(this).css({ 'background': 'none' }); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
});
</script>
</body>
</html>
'.Net Framework > .NET' 카테고리의 다른 글
| ▒ 개발자가 빠지기 쉬운 “나쁜 습관 6가지” ▒ (4) | 2010.02.03 |
|---|---|
| .NET Framework란? (0) | 2010.01.28 |
| ILDASM.EXE 사용법 (0) | 2009.11.16 |
| IBatis + SQL server 2005 설정 (0) | 2009.10.27 |
| .NET -iBATIS + Log4Net Log 설정 (1) | 2009.10.27 |
