My Header file code is given below:
<head runat="server">
<title>Untitled Page</title>
<link href="css/onedrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>
</head>
My Html body code is :
<form id="form1" runat="server">
<div id="Div1">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="width: 112%">
<tr>
<td valign="top">
<table bgcolor="#FFFFFF" align="center" width="960" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="960" height="30">
<ul class="menu" id="menu">
<li >
<a style="width:80px;text-align:center;background:url(images/nav_mid.jpg) repeat-x #2467B5;font-family:segoui-bold,Verdana, Arial, Helvetica, sans-serif;
font-size:13px;color:#FFFFFF;" href="index.php" title="Home" class="menulink">Home</a>
</li>
<li>
<a style="padding-left:13px;padding-right:0px;" href="#" title="About Us" class="menulink">About Us<img src="images/506436.png" border="0" style="float:right;margin-top:2px;margin-left:0px;padding-right:0px;" alt="arrow" /></a>
<ul>
<li><a href="it-training-company.php">Organization</a></li>
<li>
<a href="vision.php" >Vision & Mission</a>
</li>
<li>
<a href="team.php" >Team</a>
</li>
</ul>
</li>
<li>
<a style="padding-left:13px;padding-right:0px;" href="#" title="Courses" class="menulink">Courses<img src="images/506436.png" border="0" style="float:right;margin-top:2px;margin-left:0px;padding-right:0px;" alt="arrow" /></a>
<ul>
<li><a href="mainframe-training.php">Mainframe</a>
<ul >
<li><a href="devepnet.aspx"style="font-family: Constantia; font-size: medium; font-weight: lighter; font-style: normal; font-variant: normal; text-transform: none; color: #000000">
.Net</a></li>
<li><a href="devepphp.aspx"style="font-family: Constantia; font-size: medium; font-weight: lighter; font-style: normal; font-variant: normal; text-transform: none; color: #000000">
Php</a></li>
<li><a href="devepjava.aspx"style="font-family: Constantia; font-size: medium; font-weight: lighter; font-style: normal; font-variant: normal; text-transform: none; color: #000000">
JAVA</a></li>
</ul>
</li>
<li>
<a href="data-warehousing-training.php" >Data-Warehousing</a>
</li>
<li>
<a href="java-j2ee-training.php" >Java/J2EE</a>
</li>
<li>
<a href="dotnet-training.php">Dot net</a></li>
<li><a href="software-testing-training.php">Software Testing</a></li>
<li><a href="itil-training.php">ITIL</a></li>
<li><a href="pmp-training.php">PMP</a></li>
<li><a href="prince2-training.php">PRINCE 2</a></li>
</ul>
</li>
<li>
<a href="ieee-projects.php" class="menulink" title="Academic Projects">Academic Projects</a>
</li>
<li>
<a href="online-training.php" class="menulink" title="Online Training">Online Training</a>
</li>
<li>
<a href="corporate-training.php" class="menulink" title="Corporate Training">Corporate Training</a>
</li>
<li>
<a style="padding-left:16px;padding-right:0px;" href="#" class="menulink" title="Placement">Placement<img src="images/506436.png" border="0" style="float:right;margin-top:2px;margin-left:0px;padding-right:0px;" alt="arrow" /></a>
<ul>
<li><a href="freshers-placement.php">Freshers Placement</a></li>
<li>
<a href="flexi_staff.php" >Flexi Staffing</a>
</li>
<li>
<a href="perm_staff.php" >Permanent Staffing</a>
</li>
<li>
<a href="recentlyplaced.php" >Recently Placed</a>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu = new menu.dd("menu");
menu.init("menu", "menuhover");
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
My CSS code is :
ul.menu {list-style:none; margin:0; padding:0; width:960px;height:30px;background:url(../images/nav_rt.jpg) #F9F9F9 repeat-x; }
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none;font-family:segoui-bold,Verdana, Arial, Helvetica, sans-serif;
font-size:13px;}
ul.menu li {position:relative; float:left;height:30px; width:auto;}
ul.menu li:hover{background:url(../images/nav_mid.jpg) repeat-x #2467B5;color:#FFFFFF;}
ul.menu ul {position:absolute; top:30px; left:0;background:url(../images/nav_rt.jpg) #F9F9F9 repeat-x; display:none; list-style:none}
ul.menu ul li {position:relative; border-bottom:1px solid #aaa; border-top:none; width:148px; margin:0;}
ul.menu ul li a {display:block; padding:7px 7px 5px;}
ul.menu ul li a:hover {background:url(../images/nav_mid.jpg) repeat-x #2467B5;color:#FFFFFF;}
ul.menu .menulink {border:0px solid #aaa; padding:0px 8px;width:auto;line-height:30px;}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(../images/nav_mid.jpg) repeat-x #2467B5; color:#FFFFFF;}
ul.menu .topline {border-top:1px solid #aaa}
/*10px*/.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a
{
border-left: 1px solid white;
border-top: 0px solid #4682B4;
padding: .75em 1em;
text-decoration: none;
color: #EFEFEF;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: black;
}
.sf-menu li {
background: white;
}
.sf-menu li li {
background: #F0F0F0;
}
.sf-menu li li li {
background: #F0F0F0;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CE0000;
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
My JavaScript code is :
var menu = function() {
var t = 15, z = 50, s = 6, a;
function dd(n) { this.n = n; this.h = []; this.c = [] }
dd.prototype.init = function(p, c) {
a = c; var w = document.getElementById(p), s = w.getElementsByTagName('ul'), l = s.length, i = 0;
for (i; i < l; i++) {
var h = s[i].parentNode; this.h[i] = h; this.c[i] = s[i];
h.onmouseover = new Function(this.n + '.st(' + i + ',true)');
h.onmouseout = new Function(this.n + '.st(' + i + ')');
}
}
dd.prototype.st = function(x, f) {
var c = this.c[x], h = this.h[x], p = h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow = 'hidden';
if (f) {
p.className += ' ' + a;
if (!c.mh) { c.style.display = 'block'; c.style.height = ''; c.mh = c.offsetHeight; c.style.height = 0 }
if (c.mh == c.offsetHeight) { c.style.overflow = 'visible' }
else { c.style.zIndex = z; z++; c.t = setInterval(function() { sl(c, 1) }, t) }
} else { p.className = p.className.replace(a, ''); c.t = setInterval(function() { sl(c, -1) }, t) }
}
function sl(c, f) {
var h = c.offsetHeight;
if ((h <= 0 && f != 1) || (h >= c.mh && f == 1)) {
if (f == 1) { c.style.filter = ''; c.style.opacity = 1; c.style.overflow = 'visible' }
clearInterval(c.t); return
}
var d = (f == 1) ? Math.ceil((c.mh - h) / s) : Math.ceil(h / s), o = h / c.mh;
c.style.opacity = o; c.style.filter = 'alpha(opacity=' + (o * 100) + ')';
c.style.height = h + (d * f) + 'px'
}
return { dd: dd }
} ();
function check() {
if (document.enquiry.name.value == "") {
alert("Please Enter your Name");
document.enquiry.name.focus();
return false;
}
if (document.enquiry.phone.value == "") {
alert("Enter your Contact Number");
document.enquiry.phone.focus();
return false;
}
if (document.enquiry.phone.value.length != 10) {
alert("Contact Number Must be 10 Character Long");
document.enquiry.phone.focus();
return false;
}
if (!document.enquiry.phone.value.match(/^[0-9]+$/)) {
alert("Please Enter Valid Contact Number");
document.enquiry.phone.value = "";
document.enquiry.phone.focus();
return false;
}
if (!document.enquiry.email.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
alert("Enter a Valid Email Id");
document.enquiry.email.focus();
return false;
}
if (document.enquiry.comment.value == "") {
alert("Enter your Comments");
document.enquiry.comment.focus();
return false;
}
}
function rscheck() {
if (document.resume.rsname.value == "") {
alert("Please Enter your Name");
document.resume.rsname.focus();
return false;
}
if (document.resume.rsphone.value == "") {
alert("Enter your Contact Number");
document.resume.rsphone.focus();
return false;
}
if (document.resume.rsphone.value.length != 10) {
alert("Contact Number Must be 10 Character Long");
document.resume.rsphone.focus();
return false;
}
if (!document.resume.rsphone.value.match(/^[0-9]+$/)) {
alert("Please Enter Valid Contact Number");
document.resume.rsphone.value = "";
document.resume.rsphone.focus();
return false;
}
if (!document.resume.rsemail.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
alert("Enter a Valid Email Id");
document.resume.rsemail.focus();
return false;
}
if (document.resume.rsqulification.value == "") {
alert("Please Enter Qualification");
document.resume.rsqulification.focus();
return false;
}
if (document.resume.rspassing.value == "") {
alert("Please Enter Year of Passing");
document.resume.rspassing.focus();
return false;
}
if (document.resume.rsresume.value == "") {
alert("Please Upload your Resume");
document.resume.rsresume.focus();
return false;
}
}
In the Sub menu of Courses a menu named as Main frame is present when we hover the mouse over mainframe the submenu of main frame is list below but i need right side of Mainframe