By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,212 Members | 2,209 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,212 IT Pros & Developers. It's quick & easy.

Horizontal CSS and Javascript menu

P: n/a
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').getElementsByTagNa me('LI');
for(var i=0;i<U.length;i++)
if(U[i].getElementsByTagName('UL') &&
U[i].getElementsByTagName('UL').length>0)
{
U[i].onmouseover = function() {roll(this);};
U[i].onmouseout = function() {roll(this);};
}
}
}
</script>
</head>

<body>

<!-- menu customisť ******************************* -->
<ul id="menu">

<li>
<a href="#"><b>Menu 1</b></a>&nbsp;|
<ul id="newmenu" class="un">
<li><a href="#">Menu 1.1</a></li>&nbsp;|
<li><a href="#">Menu 1.2</a></li>&nbsp;|
<li><a href="#">Menu 1.3</a></li>&nbsp;|
<li><a href="#">Menu 1.4</a></li>&nbsp;|
<li><a href="#">Menu 1.5</a></li>
</ul>
</li>

<li>
<a href="#"><b>Menu 2</b></a>&nbsp;|
<ul id="newmenu" class="deux">
<li><a href="#">Menu 2.1</a></li>&nbsp;|
<li><a href="#">Menu 2.2</a></li>&nbsp;|
<li><a href="#">Menu 2.3</a></li>&nbsp;|
<li><a href="#">Menu 2.4</a></li>&nbsp;|
<li><a href="#">Menu 2.5</a></li>
</ul>
</li>

<li>
<a href="#"><b>Menu 3</b></a>&nbsp;|
<ul id="newmenu" class="trois">
<li><a href="#">Menu 3.1</a></li>&nbsp;|
<li><a href="#">Menu 3.2</a></li>&nbsp;|
<li><a href="#">Menu 3.3</a></li>&nbsp;|
<li><a href="#">Menu 3.4</a></li>&nbsp;|
<li><a href="#">Menu 3.5</a></li>
</ul>
</li>

</ul>
<br />
<br />

</body>
</html>

Mar 9 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a

polo wrote:

[snip]
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,

[/snip]

Apologies. Without going into your JavaScript, have you visited
<URL:http://www.cssplay.co.uk>?

I think the site demonstrates what you are looking for in PURE CSS,
including IE.

Quite astonishing.

Regards

Julian Turner

Mar 9 '06 #2

P: n/a
Thank you Julian
What a great site !!!
it does not solve my problem directly, but i may find a solution by
including my submenu in a table.... (horrible thought, i know) as
described in the vertical dropdown menu example. now it makes the code
rather heavy, and i dont know yet if i can do that in a horizontal
table...
Thanks again
anybody else with help on the javascript there ?

what about the whatever:hover htc inclusion ?
http://www.xs4all.nl/~peterned/csshover.html
i find that it works to mimic the hover css tag, but the positionning
is totally wrong...
any idea on that ?

Mar 9 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.