Need help with a drop down menu

[steiner]

Hi all

Please have a look at the following file:

http://www.condottiero.com/test/test.html

I'm trying to build a drop down CSS menu which I found on the web (uses a .htc file as well) but I can't get it to perform correctly.

The first link in the list does what it's supposed to do - the text color on hover changes even if you only hover over the div area and not the text.

However, the other links below it do not act as hyperlinks if I hover over the div area (only the div background color changes). I 'need' to hover over the link text for it to be recognised as a hyperlink.

Can you see what's wrong with this code - or can you suggest a better alternative which is multiple browser friendly?

Thanks in advance,
Steiner

[Grimlock]

Hello,

Use Brainjar's Revenge of the menu code instead of that script. http://www.brainjar.com/dhtml/menubar/demo.html check out the main page here http://www.brainjar.com/dhtml/menubar/. Just view source to get the code.

[Tyssen]

You need to give dimensions to the ul ul a. I also took the liberty of tightening up your code a bit:

 <ul>
   <li class="toplevel1"><a href="#">Hyperlink1</a>
 	   <ul><!-- drop down menu items -->
 		<li><a href="http://www.arc1.com">Our Services</a></li>
 		<li><a href="http://www.arc2.com">FAQs</a></li>
 		<li><a href="http://www.arc3.com">Sign Up</a></li>
 		<li><a href="http://www.arc4.com">Support</a></li>
 		<li><a href="http://www.arc5.com">What's New</a></li>
 	  </ul>
 	</li>
   <li class="toplevel2"><a href="#">Hyperlink2</a>
 	<ul><!-- drop down menu items -->
 		<li><a href="#">Our Services</a></li>
 		<li><a href="#">FAQs</a></li>
 		<li><a href="#">Sign Up</a></li>
 		<li><a href="#">Support</a></li>
 		<li><a href="#">What's New</a></li>
 	  </ul>
 	</li>
   <li class="toplevel2"><a href="#">Hyperlink3</a></li>
   <li class="toplevel2"><a href="#">Hyperlink4</a></li>
 
   </ul>

 div#listmenu {
 	font-size: 1.2em;
 	color: #E3E3E3;
 	border: 1px solid #FFFFFF;
 	border-width: 1px 0;
 	height: 24px;
 	background-image: url(../images/tile_linkbar_bkgd1.gif);
 	font-weight: bold;
 	line-height: 2em;
 
 }
 
 div#listmenu ul { height: 24px; }
 
 div#listmenu li {
 	float: left;
 	border-right: 1px solid #A59ABB;
 	list-style-type: none;
 	position: relative;
 	background: #4B0681 url(../images/tile_linkbar_bkgd1.gif);
 	text-align: left;
 }
 
 div#listmenu li.toplevel1{ 	
 	color: #E3E3E3;
 	background-image: url(../images/tile_linkbar_bkgd1.gif);
 	margin: 0 0 0 2px;
 	border-left: 1px solid #A59ABB;
 }
 
 div#listmenu li.toplevel2{ 	
 	color: #E3E3E3;
 	background-image: url(../images/tile_linkbar_bkgd1.gif);
 }
 
 div#listmenu li li {
 	color: #E3E3E3;
 	border-bottom: 1px solid #A59ABB;
 	background-image: url(../images/tile_linkbar_bkgd1.gif);
 }
 	
 div#listmenu li a {
 	color: #EDE6FF;
 	text-decoration: none;
 	display: block;
 	padding: 0 6px;
 }
 
 div#listmenu li a:hover {
 	color: #56008C;
 	background-color: #DBDBE7;
 	background-image: url(../images/tile_linkbar_bkgd2.gif);
 }
 
 div#listmenu ul li ul {
 	margin: 0px;
 	position: absolute;
 	width: 10em;
 	left: -1px;
 }
 
 div#listmenu ul li ul li {
 	width: 100%;
 	border: 1px solid #A59ABB;
 	border-width: 0 1px 1px;
 	height: 26px;
 }
 
 div#listmenu ul ul a {
 	width: 10em;
 	height: 24px;
 }
 
 div#listmenu ul li ul li:first-child {
 	border-top: 1px solid #A59ABB;
 }
 
 div#listmenu ul li ul { display: none; }
 
 div#listmenu ul li:hover ul {
 	display: block;
 	background: url(../images/tile_linkbar_bkgd2.gif);
 }

[steiner]

Hi Tyssen - thanks so much buddy! I've been knocking my head over this one all weekend!

There's just one small problem with this that I can't identify. The hover state on the child links seems to extend out and beyond the divs they're sitting in (in Firefox). Can you recognse the offending tag?

Thanks again!

[Tyssen]

I'm not sure I understand what the problem is. Have you updated the CSS in the link?

[steiner]

I'm not sure I understand what the problem is. Have you updated the CSS in the link?

Sorry Tyssen, I didn't give you the new link (would've helped):

http://www.ideasdrama.org/test/test2/test.html

You'll need to view the roll overs in Firefox to see what I'm referring to.

[Tyssen]

It's the 6px padding on the anchors which is being added to the 10em making it 12px too wide. You'll need to reset the padding on the dropdown list item anchors to an appropriate amount, probably in ems so you can work it out easily (e.g. 0.5em left and right) and then readjust the width so that it all adds up to 10.

[steiner]

Tyssen, sorry, is it just the ' div#listmenu li a' tag I need to change or do I need to ammend something else as well?

[Tyssen]

No it's the ul ul a that you need to change the width/padding.

[steiner]

OK Tyssen, understood thanks. Hope you don't mind but I've one last (probably obvious) question for you.

At present, if the child link content goes beyond the present div width, the text linewraps. What elements do I need to change in order to have the divs increase with the text? I would have thought 100% instead of 10em but that simply stretches the div across the page.