<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
<style type="text/css">
body { font: 14px Helvetica, Sans-Serif; }
ul { list-style: none; }
a { text-decoration: none; }
#page-wrap { width: 800px; margin: 25px auto; }
p { margin: 15px 0; }
* { margin: 0; padding: 0; }
ul.dropdown { position: relative; }
ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333; color: #222; }
ul.dropdown li:last-child a { border-right: none; }
ul.dropdown li:hover,ul.dropdown li:hover { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000;
border-bottom: 1px solid #ccc; float: none; }
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
</style>
<script type="text/javascript" src="JavaScript/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul.dropdown li").hover(function () {
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
}, function () {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="page-wrap">
<ul class="dropdown">
<li><a href="#">First item</a>
<%--///Forst level--%>
<ul>
<li><a href="#">Level11</a></li>
<li><a href="#">Level12</a>
<ul>
<li><a href="#">level21</a></li>
<li><a href="#">level22</a></li>
<li><a href="#">Level23</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Second Menu</a>
<ul>
<li><a href="#">Submenu21</a>
<ul>
<li><a href="#">2nlebel Submenu</a></li>
</ul>
</li>
<li><a href="#">Submenu22</a></li>
</ul>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>
No comments:
Post a Comment