Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following are the contents of the project:
-
JavaScript Code
-
Style Sheet Code
Code :
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<!-- App4 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript">
$(function () {
$('.dd').mouseenter(function () {
$('.s_links').stop(false, true).hide();
var chmenu = $(this).parent().next();
chmenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
chmenu.stop().slideDown(500);
chmenu.mouseleave(function () {
$(this).slideUp(500);
});
});
});
</script>
Step 4 : The complete code of this application is written below. It contains the code of the HTML file and the JavaScript file code.
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App4</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<!-- App4 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript">
$(function () {
$('.dd').mouseenter(function () {
$('.s_links').stop(false, true).hide();
var chmenu = $(this).parent().next();
chmenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
chmenu.stop().slideDown(500);
chmenu.mouseleave(function () {
$(this).slideUp(500);
});
});
});
</script>
<style type="text/css">
ul
{
list-style:none;
padding:0px;
margin:0px
}
ul li
{
display:inline;
float:left;
}
ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:20px;
font-family:Comic Sans MS;
text-decoration:none;
display:block;
width:210px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}
ul li a:hover
{
color:#cccccc;
background:#0026ff;
font-weight:bold;
text-decoration:none;
display:block;
width:210px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}
ul li.s_links a
{
color: #000000;
background: #ccff66;
border-bottom: 1px solid #cccccc;
font-weight: 100;
text-decoration: none;
display: block;
width: 210px;
text-align: center;
margin-top: 2px;
}
ul li.s_links a:hover
{
color:#000000;
background:#ccff66;
font-weight:100;
text-decoration:none;
display:block;
width:200px;
text-align:center;
}
ul li.s_links
{
display:none;
}
#container
{
margin:0px auto;
width:800px;
}
.clear
{
clear:both;
}
.left
{
float:left;
}
.right
{
float:right;
}
</style>
</head>
<body style="background-color:#ffffff">
<div id="container" style="margin-top:40px;">
<ul>
<li><a href="#" class="dd">Home</a></li>
<li class="s_links">
<a href="default5.aspx">About Us</a>
<a href="default6.aspx">Testomonial</a>
<a href="default6.aspx">History</a>
</li>
</ul>
<ul>
<li><a href="#" class="dd">Services</a></li>
<li class="s_links">
<a href="default7.aspx">Web Applications</a>
<a href="default8.aspx">Windows Applications</a>
<a href="default9.aspx">Metro Style</a>
<a href="$">Windows Phone</a>
<a href="$">iPhone</a>
</li>
</ul>
<ul>
<li><a href="#" class="dd">Professionals</a></li>
<li class="s_links">
<a href="default.aspx">Mobile Application</a>
<a href="default4.aspx">.Net Courses</a>
<a href="default2.aspx">Android Application</a>
<a href="default3.aspx">iphone Development</a>
<a href="#">Cloud Computing</a>
</li>
</ul>
</div>
<br/>
</body>
</html>
Step 5 : After running this code the output looks like this:
![img3.gif]()
Enter the Mouse on Home title.
![img4.gif]()
Enter the Mouse on Professionals title.
![img5.gif]()