Click here to watch video!!!
DropDown.aspx File:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropDown.aspx.cs" Inherits="DropDownMenuDemo.DropDown" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Drop Down Menu Demo</title>
<link href="menu.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="menu">
<ul>
<li>
<a href="#">Home1</a>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#">Home2</a>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#">Home</a>
</li>
</ul>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Drop Down Menu Demo</title>
<link href="menu.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="menu">
<ul>
<li>
<a href="#">Home1</a>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#">Home2</a>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#">Home</a>
</li>
</ul>
</div>
</form>
</body>
</html>
menu.css File:
#menu{
width:450px;
margin-left:auto;
margin-right:auto;
}
#menu ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#menu ul li{
background-color:blue;
position:relative;
float:left;
}
#menu ul li ul li{
background-color:black;
}
#menu ul li a{
text-decoration:none;
display:block;
width:150px;
height:30px;
line-height:30px;
text-align:center;
color:cornsilk;
}
#menu ul li ul li a{
width:200px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul li:hover{
background-color:black;
}
#menu ul li ul li a:hover{
background-color:yellow;
color:black;
border:1px solid black;
margin-left:-1px;
}
width:450px;
margin-left:auto;
margin-right:auto;
}
#menu ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#menu ul li{
background-color:blue;
position:relative;
float:left;
}
#menu ul li ul li{
background-color:black;
}
#menu ul li a{
text-decoration:none;
display:block;
width:150px;
height:30px;
line-height:30px;
text-align:center;
color:cornsilk;
}
#menu ul li ul li a{
width:200px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul li:hover{
background-color:black;
}
#menu ul li ul li a:hover{
background-color:yellow;
color:black;
border:1px solid black;
margin-left:-1px;
}
No comments:
Post a Comment