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:#3c5 279; /*#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:absolu te;
background:#CCC CCC;
list-style:none;
z-index:1;
}
..un{
margin:2px -1px;
}
..deux{
margin:2px -79px;
}
..trois{
margin:2px -157px;
}
#menu ul li{
position:relati ve;
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.getElement sByTagName('UL' )[0];
L.style.display = L.style.display ==''? 'block' : '';
}
onload = function() { if(ie) {
var U = document.getEle mentById('menu' ).getElementsBy TagName('LI');
for(var i=0;i<U.length; i++)
if(U[i].getElementsByT agName('UL') &&
U[i].getElementsByT agName('UL').le ngth>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>Men u 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>Men u 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>Men u 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> 2 2421
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
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 ? This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Maria Gonzalez |
last post by:
Hello,
I would like to know if it is possible to create a Navigational Menu that
has all the Major Categories on top row, then when a mouse is over it, the
bottom row appears with sublinks but not like a list vertically. I want it
to show up horizontally across that bottom row and still keep the top
Category highlighted.
Does anyone know where I can find a script for something like this? Is it
possible to do with javascript?
|
by: elad |
last post by:
Hi
The Menu doesn't work properly when I have 2 frame and the Menu popup
frame=document target frame, when I choose item in
the menu the doc opened and the menu get stuck.
Here is the code I'm using:
FrameSet -------------------------------------------------------
<html>
|
by: addled |
last post by:
Hi there, after reading posts here for a few months, I've built the
courage to see if someone can see where I"m going wrong in the webpage
I've been working on.
In particular the horizontal nav bar accross the top of the page.
viewd here http://foundations.port5.com/currprojects/babylon.html
I am running win XP and have tested in both Avant (MSIE) and Opera
7.23
the result is a different problem in each.
|
by: theo |
last post by:
Hi,
I'm working on a horizontal row menu, to use like folder tabs. Does
anyone know what the CSS style "cursor" is supposed to produce? Any working
samples? I put it in the code, but can't see anything resolve.
http://www.w3schools.com/css/pr_class_cursor.asp
It's probably staring right at me, but can someone tell me why hover isn't
working in IE, but does in Mozilla?
http://wholives.com/temp/tabs.htm
me
|
by: Craig van Nieuwkerk |
last post by:
Hi. I am trying to create a horizontal menu like the one here
http://www.milonic.com/menusample25.php where the drop down menu for each
item it horizontal on a new row instead of vertical. Another example is at
www.virginblue.com.au. I am pretty new to doing fancy style sheet stuff so
any info would be appreciated.
Craig.
| |
by: Chris Beall |
last post by:
Objective: Using an HTML list, create a horizontal nav menu with these
characteristics:
- All menu items have the same width at all times.
- When the window width is reduced, the menu items stack, rather than
creating a horizontal scroll bar.
- The menu cluster is always centered on the window.
See
http://pages.prodigy.net/chris_beall/Demo/centered%20horizontal%20list.html
|
by: Verona Busch |
last post by:
Hi everybody,
I am very happy to find this group. I am searching for a solution to
make a horizontal list menu with submenu on hover.
I found a lot of examples for horizontal lists which open vertical lists
on :hover i.e. http://phoenity.com/newtedge/horizontal_nav/
But what I am looking for is a horizontal list that opens another
horizontal list and both need to be right-floated.
|
by: sindhu |
last post by:
Hello
please some one tell me how to make a menu appear horizontal or vertical in javascript and css.
I'm bugged up after searching for one factor that makkes a menu8 appear horizontal or vertical
please someone..........
thanks in advance
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
| |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |