combining javascript and ul il with css don't work in a menu

Page 1 of 1

2 Replies - 1202 Views - Last Post: 10 May 2011 - 04:35 PM

#1 arrifinu  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 31-August 07

combining javascript and ul il with css don't work in a menu

Posted 23 November 2010 - 12:53 PM

Hello guys,
My problem is that I combined a javascript hover images in an "li ul" menu, but they don't work together, and I don't know why.
In fact I wanted a change, instead of using a forground and background coloured menu on mouse hover, I thought about using an image javascript menu with a forground and background images. All that by using the UL and IL code to have a coloured submenus.
You can see an exemple here that shows the error :
http://nadopresse.ligaforums.com/
The images are not in order, and the submenus which are supposed to be hidden on MouseOut, they are shown.
Also, on MouseOver the submenu elements do not come over the under menu images, but it enlarges the height to fit all the submenu elements.
This is the header.php file that contains the javascript and ul il code, also the default.css and style.css files.
I'd like to know what mistake did I do, and what should I do to make the menu look good.
Thanks in advance.

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: combining javascript and ul il with css don't work in a menu

#2 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: combining javascript and ul il with css don't work in a menu

Posted 24 November 2010 - 12:47 AM

Hi there

Would it be possible to only post the code which is creating the problem? I have limited time so it would make it easier.

On the subject of js menue - have you given any thought as to how it will behave if a users has js disabled?
Was This Post Helpful? 0
  • +
  • -

#3 arrifinu  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 31-August 07

Re: combining javascript and ul il with css don't work in a menu

Posted 10 May 2011 - 04:35 PM

Ok, then the default.css code is:

#menu {padding:0; margin:0; list-style:none; height:25px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#menu li {float:right; margin-left:1px;}
#menu li a {display:block; float:left; height:25px; line-height:25px; background:#333; color:#ccc; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 0;}
#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
#menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}
#menu li:hover {position:relative; z-index:200;}
#menu li:hover > a {color:#fff; background:#a91010;}
#menu li:hover > a.sub {color:#fff; background-color:#a91010;}
#menu li.current a {color:#fff; background:#a91010;}
#menu li a.sub {background: #333 url(down-arrow.gif) no-repeat right center;}
#menu li.current a.sub {color:#fff; background:#840 url(down-arrow.gif) no-repeat right center;;}
#menu :hover ul {left:0; top:0px; width:120px; background:#444;}
#menu ul a {width:120; height:25; margin:0; padding:0; list-style:none;}, 
#menu :hover ul ul {position:absolute; left:9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#menu :hover ul :hover ul {left:0px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}
#menu :hover ul li {margin:0; border-top:1px solid #666;}
#menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:25px; line-height:25px;}
#menu :hover ul li a.fly {background:#333 url(right-arrow.gif) no-repeat right center;}
#menu :hover ul :hover {background-color:#a91010; color:#fff;}
#menu :hover ul :hover a.fly {background-color:#a91010; color:#fff;}
#menu :hover ul li.currentsub a {background:#840; color:#fff;}
#menu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;}
#menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
#menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;}
#menu :hover ul :hover ul li.currentfly a,
#menu :hover ul :hover ul li.currentfly a:hover {background:#840; color:#fff;}


And the code of the php page is :

<head>
<script type="text/javascript">
index = new Image(260,56);
indexover = new Image(260,56);
indexover.src = 'http://nadopresse.ligaforums.com/menu/indexho.jpg';
sections = new Image(260,56);
sectionsover = new Image(260,56);
sectionsover.src = 'http://nadopresse.ligaforums.com/menu/sectionsho.jpg';
websites = new Image(260,56);
websitesover = new Image(260,56);
websitesover.src = 'http://nadopresse.ligaforums.com/menu/websitesho.jpg';
contact = new Image(260,56);
contactover = new Image(260,56);
contactover.src = 'http://nadopresse.ligaforums.com/menu/contactho.jpg';
</script>

<link href="http://nadopresse.ligaforums.com/wp-content/themes/NadoPressss/styles/default.css" rel="stylesheet" type="text/css" media="screen">
<link href="http://nadopresse.ligaforums.com/wp-content/themes/NadoPressss/style.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
<div id="navbar">
<ul id="menu">
	<li><a href="/"><img src="http://nadopresse.ligaforums.com/menu/index.jpg" border="0" onmouseover="index.src=this.src; this.src=indexover.src;" onmouseout="this.src=index.src;"></a></li>
	<li><a class="sub" href="/"><img src="http://nadopresse.ligaforums.com/menu/sections.jpg" border="0" onmouseover="sections.src=this.src; this.src=sectionsover.src;" onmouseout="this.src=sections.src;">
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="http://www.arrifinu.net/?cat=3">ط£ط®ط¨ط§ط± ظ…ط­ظ„ظٹط©</a></li>
			<li><a href="http://www.arrifinu.net/?cat=8">ط£ط®ط¨ط§ط± ط±ظٹط§ط¶ظٹط©</a></li>
			<li><a href="http://www.arrifinu.net/?cat=5">ط£ط®ط¨ط§ط± ظˆط·ظ†ظٹط©</a></li>
			<li><a href="http://www.arrifinu.net/?cat=10">ظ…ظ† ط®ط§ط±ط¬ ط§ظ„ط­ط¯ظˆط¯</a></li>
			<li><a href="http://www.arrifinu.net/?cat=4">ط£ط®ط¨ط§ط± ظ…طھظ†ظˆط¹ط©</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="/"><img src="http://nadopresse.ligaforums.com/menu/websites.jpg" border="0" onmouseover="websites.src=this.src; this.src=websitesover.src;" onmouseout="this.src=websites.src;"></a></li>
	<li><a href="/"><img src="http://nadopresse.ligaforums.com/menu/websites.jpg" border="0" onmouseover="websites.src=this.src; this.src=websitesover.src;" onmouseout="this.src=websites.src;"></a></li>
	<li><a class="sub" href=""><img src="http://nadopresse.ligaforums.com/menu/websites.jpg" border="0" onmouseover="websites.src=this.src; this.src=websitesover.src;" onmouseout="this.src=websites.src;"></a><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="http://www.arrifinu.net/?cat=14">ط§ظ„ط²ظٹط§ط±ط© ط§ظ„ظ…ظ„ظƒظٹط©</a></li>
			<li><a href="http://www.arrifinu.net/?cat=16">ط´ط¨ظƒط© ط§ظ„ظ…ط®ط¯ط±ط§طھ</a></li>
			<li><a href="http://www.arrifinu.net/?cat=18">ط§ظ„ظ…ظ„ظپ ط§ظ„ط£ط³ط¨ظˆط¹ظٹ</a></li>
			<li><a href="http://www.arrifinu.net/?cat=17">ظپط³ط­ط© ط§ظ„طµظٹظپ</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li id="contact"><a href="/"><img src="http://nadopresse.ligaforums.com/menu/contact.jpg" border="0" onmouseover="contact.src=this.src; this.src=contactover.src;" onmouseout="this.src=contact.src;"></a></li>
	<li><img src="http://nadopresse.ligaforums.com/menu/menubg.jpg" border="0"></li>
</ul><div class="clear"></div>	
</div>
</body>


Hope you help me find the problem and solution
You can visit this page to see yourself
http://nadopresse.ligaforums.com

Thanks in advance
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1