P
polo
Hi
i am trying to get a horizontal menu and sub menu in css, which works
great on my Firefox
But, in order to get around the ie hover bug, i included some
javascript which gives me a strange result... I admit i got recent help
by Stephane on the js code (thanks)
here is my code for anyone with a suggestion as to how to mimic the css
properties "inline" or "float" on ie and get the same result as in FF:
<html>
<head>
<title></title>
<style type="text/css">
/*-------------------------------------------------------------*/
#menu{
margin:0px;
padding:0px;
list-style:none;
width:750;
background:#3c5279; /*#5f7eb3;*/
float:left;
font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
}
#menu li{
float:left;
display:block;
padding:2px 1px;
}
#menu li a{
display:inline;
padding:2px 6px;
color:#FFFFFF;
text-decoration:none;
}
#menu li a:hover{
color: orange;
}
#menu li ul{
display:none;
}
#menu li:hover ul{
display:block;
width:736px;
height: 25;
padding-top:10px;
padding:7px;
}
#menu ul{
position:absolute;
background:#CCCCCC;
list-style:none;
z-index:1;
}
..un{
margin:2px -1px;
}
..deux{
margin:2px -79px;
}
..trois{
margin:2px -157px;
}
#menu ul li{
position:relative;
float:none;
}
#menu ul li a{
display:inline;
color:#000000;
font:12px Tahoma, Verdana, Helvetica, sans-serif;
font-weight:bold;
}
ul#newmenu {
font-weight:bold;
color:#000000;
}
ul#newmenu li {
display: inline;
}
ul#newmenu li a:hover {
color: orange;
}
/*-------------------------------------------------------------*/
</style>
<script type="text/javascript">
/* javascript pour l'idiot d'Internet Explorer */
// is it IE ?
var ie=false; /*@cc_on ie=true; @*/
function roll(quoi) {
var L = quoi.getElementsByTagName('UL')[0];
L.style.display = L.style.display==''? 'block' : '';
}
onload = function() { if(ie) {
var U = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0;i<U.length;i++)
if(U.getElementsByTagName('UL') &&
U.getElementsByTagName('UL').length>0)
{
U.onmouseover = function() {roll(this);};
U.onmouseout = function() {roll(this);};
}
}
}
</script>
</head>
<body>
<!-- menu customisé ******************************* -->
<ul id="menu">
<li>
<a href="#"><b>Menu 1</b></a> |
<ul id="newmenu" class="un">
<li><a href="#">Menu 1.1</a></li> |
<li><a href="#">Menu 1.2</a></li> |
<li><a href="#">Menu 1.3</a></li> |
<li><a href="#">Menu 1.4</a></li> |
<li><a href="#">Menu 1.5</a></li>
</ul>
</li>
<li>
<a href="#"><b>Menu 2</b></a> |
<ul id="newmenu" class="deux">
<li><a href="#">Menu 2.1</a></li> |
<li><a href="#">Menu 2.2</a></li> |
<li><a href="#">Menu 2.3</a></li> |
<li><a href="#">Menu 2.4</a></li> |
<li><a href="#">Menu 2.5</a></li>
</ul>
</li>
<li>
<a href="#"><b>Menu 3</b></a> |
<ul id="newmenu" class="trois">
<li><a href="#">Menu 3.1</a></li> |
<li><a href="#">Menu 3.2</a></li> |
<li><a href="#">Menu 3.3</a></li> |
<li><a href="#">Menu 3.4</a></li> |
<li><a href="#">Menu 3.5</a></li>
</ul>
</li>
</ul>
<br />
<br />
</body>
</html>
i am trying to get a horizontal menu and sub menu in css, which works
great on my Firefox
But, in order to get around the ie hover bug, i included some
javascript which gives me a strange result... I admit i got recent help
by Stephane on the js code (thanks)
here is my code for anyone with a suggestion as to how to mimic the css
properties "inline" or "float" on ie and get the same result as in FF:
<html>
<head>
<title></title>
<style type="text/css">
/*-------------------------------------------------------------*/
#menu{
margin:0px;
padding:0px;
list-style:none;
width:750;
background:#3c5279; /*#5f7eb3;*/
float:left;
font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
}
#menu li{
float:left;
display:block;
padding:2px 1px;
}
#menu li a{
display:inline;
padding:2px 6px;
color:#FFFFFF;
text-decoration:none;
}
#menu li a:hover{
color: orange;
}
#menu li ul{
display:none;
}
#menu li:hover ul{
display:block;
width:736px;
height: 25;
padding-top:10px;
padding:7px;
}
#menu ul{
position:absolute;
background:#CCCCCC;
list-style:none;
z-index:1;
}
..un{
margin:2px -1px;
}
..deux{
margin:2px -79px;
}
..trois{
margin:2px -157px;
}
#menu ul li{
position:relative;
float:none;
}
#menu ul li a{
display:inline;
color:#000000;
font:12px Tahoma, Verdana, Helvetica, sans-serif;
font-weight:bold;
}
ul#newmenu {
font-weight:bold;
color:#000000;
}
ul#newmenu li {
display: inline;
}
ul#newmenu li a:hover {
color: orange;
}
/*-------------------------------------------------------------*/
</style>
<script type="text/javascript">
/* javascript pour l'idiot d'Internet Explorer */
// is it IE ?
var ie=false; /*@cc_on ie=true; @*/
function roll(quoi) {
var L = quoi.getElementsByTagName('UL')[0];
L.style.display = L.style.display==''? 'block' : '';
}
onload = function() { if(ie) {
var U = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0;i<U.length;i++)
if(U.getElementsByTagName('UL') &&
U.getElementsByTagName('UL').length>0)
{
U.onmouseover = function() {roll(this);};
U.onmouseout = function() {roll(this);};
}
}
}
</script>
</head>
<body>
<!-- menu customisé ******************************* -->
<ul id="menu">
<li>
<a href="#"><b>Menu 1</b></a> |
<ul id="newmenu" class="un">
<li><a href="#">Menu 1.1</a></li> |
<li><a href="#">Menu 1.2</a></li> |
<li><a href="#">Menu 1.3</a></li> |
<li><a href="#">Menu 1.4</a></li> |
<li><a href="#">Menu 1.5</a></li>
</ul>
</li>
<li>
<a href="#"><b>Menu 2</b></a> |
<ul id="newmenu" class="deux">
<li><a href="#">Menu 2.1</a></li> |
<li><a href="#">Menu 2.2</a></li> |
<li><a href="#">Menu 2.3</a></li> |
<li><a href="#">Menu 2.4</a></li> |
<li><a href="#">Menu 2.5</a></li>
</ul>
</li>
<li>
<a href="#"><b>Menu 3</b></a> |
<ul id="newmenu" class="trois">
<li><a href="#">Menu 3.1</a></li> |
<li><a href="#">Menu 3.2</a></li> |
<li><a href="#">Menu 3.3</a></li> |
<li><a href="#">Menu 3.4</a></li> |
<li><a href="#">Menu 3.5</a></li>
</ul>
</li>
</ul>
<br />
<br />
</body>
</html>