Post
Ask Question
Priyank Khare

Priyank Khare

  • NA
  • 256
  • 75.9k

Platform independent menu list

Jul 4 2014 6:13 AM
Hello,
I am designing a HTML page. In that page there is  a horizontal menu with dropdown menu items.
but on Google Chrome, this menu bar is working fine. But on Internet Explorer and Firefox, it is not displaying accordingly.
So, i want to know what code should i have to be added to make it platform independent menu bar.
My HTML code is as following -
 
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {
margin: 0 0 0 0px;}
ul.drop a {
display:block; color: #fff; font-family: Bodoni MT; font-size: 19px; text-decoration: none;}
ul.drop, ul.drop li, ul.drop ul {
list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #888; color: #fff;}
ul.drop {
position: relative; z-index: 597; float: left; width:100%;
top: 0px;
left: 0px;
height: 33px;
}
ul.drop li {
float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
ul.drop li.hover, ul.drop li:hover {
position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
ul.drop ul {
visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 155px; /* 245px; */
background: #888; border: 1px solid #fff; }
ul.drop ul li {
float: none; }
ul.drop ul ul {
top: -2px; left: 100%; }
ul.drop li:hover > ul {
visibility: visible }

/* This rule will be applied to hide element on the page */
.hidden { display: none; }
#toggled_0 { height:100px; width:300px; border:1px solid blue; overflow:auto; }
</style>


<!-- <script type="text/javascript" src="MenuCommon.js"></script> -->
<script type="text/javascript">
/*---- CROSS BROWSER DROPDOWN MENU ----*/
// Checks that the class 'className' is defined for the element 'el'
function hasClass(el, className) {
var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
return re.test(el.className);
}

// Adds the class 'className' to the element 'el'
function addClass(el, className) {
if (!hasClass(el, className)) {
el.className += ' ' + className;
}
}

// removes the class 'className' from the element 'el'
function delClass(el, className) {
var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
el.className = el.className.replace(re, ' ');
}

// Toggles the class 'className' to the element 'el'
function toggleClass(el, className) {
if (hasClass(el, className)) { delClass(el, className); }
else {
addClass(el, className);
}
}
</script>
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr style="background-image: url(img/topbg.jpg);">
<td>&nbsp;</td>
<td valign="top"><table width="990" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="990" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="102" valign="middle"><img src="img/logo1.jpg" width="102" height="155"/></td>
<td width="888" valign="top"><table width="888" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="888" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="521">&nbsp;</td>
<td width="367"><table width="367" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
<tr> </tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width="888" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="803"><img src="img/ccstext1.png" width="803" height="87" /></td>
<td width="85"><img src="img/logo2.jpg" width="85" height="87" /></td>
</tr>
</table></td>
</tr>
<tr>
<td class="consu"><div align="right"></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td >
<ul id="TOP" class="drop">

<li><a href="#TOP">&nbsp;Home&nbsp;&nbsp; </a></li>
<li><a href="ccsiipa.htm">&nbsp;About Us&nbsp;&nbsp;</a></li>
<li><a href="brief.htm">&nbsp;Team&nbsp;&nbsp;</a></li>
<li><a href="#">Publications</a>
<ul>
<li><a href="publications/books.htm">Books</a></li>
<li><a href="publications/monograph.htm">Monographs</a></li>
<li><a href="silverjcpact1986.pdf">Silver Jublee Report</a></li>
</ul>
</li>

<li><a href="annual_reports.htm">Annual Reports</a></li>
<li><a href="ccsglance.pdf">Five Years at a Glance</a></li>
<li><a href="cp_act1986.htm">&nbsp;CPA 1986&nbsp;</a></li>
<li><a href="#">Activities</a>
<ul>
<li class="dir"><a href="#">Training</a>
<ul>
<li class="dir"><a href="iipatrgcalendar2013to14.pdf">Training Calendar</a></li>
<li class="dir"><a href="activity/proceedings.htm">Proceedings of Programme</a></li>
</ul></li>
<li class="dir"><a href="#">Research Study Reports</a>
<ul>
<li class="dir"><a href="activity/research_study_report.htm">Research Study</a></li>
<li class="dir"><a href="activity/Evaluation_study_report.htm">Evaluation Report</a></li>
<li class="dir"><a href="activity/ongoingresearchstudy.pdf">Ongoing Study List</a></li>
</ul></li>
<li class="dir"><a href="#">Seminar</a>
<ul>
<li class="dir"><a href="#">Seminar Reports</a></li>
<li class="dir"><a href="#">Forthcoming Seminars </a></li>
</ul></li>
<li><a href="publication1.htm">E-Newsletters</a></li>
<li><a href="activity/valiphoto.htm">Photo Gallery</a></li>
</ul> </li>
</ul> </td>
 
Thanks in advance. 

Answers (1)