Weird CSS menu problem

HTML & CSS
1

Hi everybody,

I am a new here, I have facing a very strange problem.

Problem:
When I hover a menu item on the menu bar, the list items of that menu items would be invisible, it happening in IE7 browser and maybe IE9 too.

Check the attached ZIP file.

Could anybody advice me how to fix it by only touching CSS code?

Screenshot:

2

Please solve the problem.

I am really worry about it. :frowning:

Thanks.

3

Welcome to Sitepoint

Your attachments have not yet been approved, so it’s not possible for anyone to study your code. For the best chance of a quick response, include code in your post (formatted using the Select Syntax function in the message toolbar) or, even better, provide a link to a live page.

“Bumping” one’s own thread to get attention isn’t advisable.

4

@Victorinox:
Thanks.

What is the procedure of editing my original post?

Here is the live link : http://zaheer.isgreat.org/menu/

Regards,
Zaheer Abbas

5

  1. some MEANINGFUL formatting might make debugging this easier.

  2. you appear to have two div around the UL for no good reason.

  3. you appear to have span inside every anchor for no good reason.

  4. There is no real reason for that ‘parent’ class to even exist.

Though your problem is most likely a haslayout issue – I’m gonna be AFK most of the morning, but this afternoon I’ll try to revisit this to show you a bit better way of handling this. For now, I’d neuter the markup down to something a bit cleaner – as CSS is only as good as the HTML it’s applied to:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Welcome to Blackburn United Football Club - BUFC
</title>

</head><body>

<ul id="mainmenu">
	<li>
		<a href="latest-news/index.html">News</a>
		<ul>
			<li><a href="latest-news/archive/index.html">Archive</a></li>
			<li><a href="feeds/news/index.html">RSS Feed</a></li>
		</ul>
	</li><li>
		<a href="seniors-a/index.html">Seniors A</a>
		<ul>
			<li><a href="seniors-a/fixtures/index.html">Fixtures</a></li>
			<li><a href="seniors-a/result-tables/index.html">Results &amp; Tables</a></li>
			<li><a href="seniors-a/squad/index.html">Squad</a></li>
		</ul>
	</li><li>
		<a href="seniors-b/index.html">Seniors B</a>
		<ul>
			<li><a href="seniors-b/fixtures/index.html">Fixtures</a></li>
			<li><a href="seniors-b/result-tables/index.html">Results &amp; Tables</a></li>
			<li><a href="seniors-b/squad/index.html">Squad</a></li>
		</ul>
	</li><li>
		<a href="under-14s/index.html">Under 14s</a>
		<ul>
			<li><a href="under-14s/fixtures/index.html">Fixtures</a></li>
			<li><a href="under-14s/result-tables/index.html">Results &amp; Tables</a></li>
			<li><a href="under-14s/squad/index.html">Squad</a></li>
			<li><a href="under-14s/on-the-spot/index.html">On The Spot</a></li>
		</ul>
	</li><li>
		<a href="under-9s/index.html">Under 9s</a>
		<ul>
			<li><a href="under-9s/fixtures/index.html">Fixtures</a></li>
			<li><a href="under-9s/result-tables/index.html">Results &amp; Tables</a></li>
			<li><a href="under-9s/squad/index.html">Squad</a></li>
			<li><a href="under-9s/on-the-spot/index.html">On The Spot</a></li>
		</ul>
	</li><li>
		<a href="academy/index.html">Academy</a>
	</li><li>
		<a href="photo-gallery/index.html">Gallery</a>
	</li><li>
		<a href="sponsors-links/index.html">Sponsors</a>
	</li><li>
		<a href="useful-info/index.html">Information</a>
		<ul>
			<li><a href="useful-info/child-protection/index.html">Child Protection</a></li>
			<li><a href="useful-info/code-of-conduct/index.html">Code of Conduct</a></li>
			<li><a href="useful-info/medical-form/index.html">Medical Form</a></li>
		</ul>
	</li><li>
		<a href="registration/index.html">Registration</a>
	</li><li>
		<a href="forum/index.html">Forum</a>
	</li><li>
		<a href="contact-us/index.html">Contact</a>
	</li>
</ul>

<div id="content">
 
<!-- #content --></div>

<div id="footer">
	&copy; Copyright 1995-2011 <a href="index.html">Blackburn United Football Club</a>
<!-- #footer --></div>

</body></html>

I’ll toss together the CSS to go with that this afternoon… for now, have a look at my current menu code approach, which I think would serve well here:

Index of /codeExamples/menuDemo

6

@deathshadow60:
Thanks for the reply.

Actually I need to solve the problem without touching its original html file, is that possible?

I am looking forward to seeing your next reply.

Thanks once again.

Regards,
Zaheer Abbas