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 -
/*---- 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; }
/*---- 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);
}
}
|




Dipankar BiswasPosted Aug 1, 2014, 5:28 AM