TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Priyank Khare
NA
256
75.7k
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> </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"> </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> </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"> Home </a></li>
<li><a href="ccsiipa.htm"> About Us </a></li>
<li><a href="brief.htm"> Team </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"> CPA 1986 </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.
Reply
Answers (
1
)
Node.Js
How to make slide with next and previous button in js