problem with <ul> width in dd menu

bazz

08-15-2005, 01:41 PM

Hi,

I have used Suckerfishes dd menu with 6 levels and whilst it works, the css isn't quite perfect. (Only checked in FF as I haven't begun the hacks for IE yet).

I would appreciate a tip on how to make the last list, to flyout, to display the ul at the full width of the longest item. Fromn the source code below, you should see that the last item proturdes beyond the background until you hover it.

I have tried a few css changes but I am out of ideas now.

Please help.

bazz

opps better add the source code :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - Three Level Bones</title>

<style type="text/css">

body {
font-family: arial, helvetica, serif;
}
#mainDD {
font-fanily : "Arial", verdana, sans-serif, helvetica;
background-color : #940031;
width : 100%;
height : 25px;
text-align : left;
}

#nav, #nav ul { /* all lists */
padding: 0px;
margin: 0;
list-style: none;
line-height: 1;
color: #eeeeee;
}

#nav a {

display: block;
width: 10em;
color : #aaaaaa;
}

#nav a:link, #nav a:visited, #nav a:active, #nav a:hover {
color : #aaaaaa;
text-decoration : none;
background : #940031;
/*font-size : 0.95em;*/
width : 100%;
}

#nav li { /* all list items */

float: left;
width: 7em; /* width needed or else Opera goes nuts */
/*background : #940031; /* THIS IS THE CSS FOR THE TITLE LINKS */*/
}

#nav li ul { /* second-level lists */
position: absolute;
line-height : 20px;
width: 7em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background : #940031;
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 7em;
left : -999em;
background : #940031;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul, #nav li:hover ul ul ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul, #nav li.sfhover ul ul ul ul ul, #nav li.sfhover ul ul ul ul ul ul {
left: -999em; /* added by me */
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li li li li:hover ul, #nav li li li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul, #nav li li li li li.sfhover ul, #nav li li li li li li.sfhover ul { /* lists nested under hovered list items */
left : auto;
top : 25px;
}
#nav li li li li li li:hover a, #nav li li li li li li.sfhover a {
padding : 0 25px 0 0 ;

}
#content {
clear: left;
color: #ccc;
}

</style>

<script type="text/javascript"><![CDATA[//><!]]></script>

</head>

<body>

<div id="control_panel_index_pages">
<div id="mainDD">
<ul id="nav">
<li>
Accommodation
<ul>
<li>
Antrim
<ul>
<li>

<a href="3Star">3Star</a>

<ul>
<li>
<a href="#>town</a>
<ul>
<li>
Hotel
<ul>

<li>
<a href="#">businessname</a>

</li>
</ul>
</li>
</ul>
</li>
</ul>

</li>
</ul>
</li>

<li>
county
<ul>
<li>
<a href="#">star rating</a>

<ul>
<li>
<a href="town"></a>

<ul>
<li>
Guesthouse
<ul>
<li>

<a href="#">buisinessname</a>
</li>
</ul>
</li>

</ul>
</li>
<li>
<a href=""></a>

<ul>
<li>
Guesthouse
<ul>
<li>

<a href="#">business name</a>
</li>
</ul>

</li>
</ul>
</li>
</ul>
</li>

<li>
<a href="null">null</a>
<ul>

<li>
<a href="Bangor">Bangor</a>
<ul>
<li>
BnB
<ul>

<li>
<a href="">businessname</a>

</li>
</ul>
</li>
</ul>
</li>
</ul>

</li>
</ul>

</li>
</ul>
</li>
<li>
Attraction
<ul>
<li>

Down
<ul>

<li>
<a href="Monument">Monument</a>
<ul>
<li>
<a href="Newtownards">Newtownards</a>
<ul>

<li>

Historic
<ul>
<li>
<a href="#">name</a>
</li>
</ul>
</li>
</ul>

</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body></html>

mcdougals4all

08-15-2005, 03:58 PM

#nav li li li li li li:hover a, #nav li li li li li li.sfhover a { padding: 0pt 25px 0pt 0pt; }
It seems to be this line of CSS that correctly extends the background to the full length of the text on hover. Maybe just remove the :hover? Is that what you're after.

Just an opinion, but a menu 6 levels deep seems like too much. As a visitor, I would rather be given the ability to drill down through some top level categories rather than have every available page presented at once. Just a thought...

bazz

08-15-2005, 04:38 PM

Thanks mcdougals4all for the reply. I'll try that.

I appreciate your opinion too :) .

I, too, have had my doubts about so many levels. I started out with the intention of enabling visitors to get straight to their page of interest in one click which could enable me to remove 'index pages', which clog up the search engine results. I mean if a search engine finds what the visitor is looking for, (a specific business), they won't really know about it because so many 'directories' have clogged up the top results.

But I admit, I haven't finally decided and, also, five tiers does look a bit strange.

Bazz

Tristan Gray

08-16-2005, 12:55 PM

Six levels of drop downs is definitely too much. I don't want to be too mean or whatever about it but that sounds really ugly. I would probably never use more than three levels of drop downs. You know there is another type of similar menu possible with just CSS that might accomodate your enormous menu a little better.

Here is the CSS Hybrid Menu (http://www.alistapart.com/articles/hybrid/).

These menus I think over all are much better than suckerfish drop-downs and certainly seems like they will be for your needs. Also probably won't take a lot to convert your current drop downs to these if you so wish. Good luck.

bazz

08-16-2005, 05:42 PM

heh heh.

I think that is what I am using but if I recall correctly, I got it from the Suckerfish site. you can see it at the top of the page.

here's a link which I'll take down soon.

Is it bad? I need to enbale access from the menu to the specific accommodation. Is there another way without trudging through many pages?

Bazz

Tristan Gray

08-16-2005, 06:02 PM

Well in IE6 your site is displaying no drop down effect at all and suckerfish is a fair bit different than the hybrids. Observe:

Hybrid CSS menus (http://www.alistapart.com/d/hybrid/hybrid-4.html)

Suckerfish CSS menus (http://www.htmldog.com/articles/suckerfish/example/)

Pretty big difference in my opinion. The suckerfish is good for basic drop-downs but the hybrid is much better if you have a lot of items to manage. Otherwise the drop-downs will get too cluttered-looking.

Upon looking at your site in firefox to see the drop downs (that means you have a lot more work to do because 90% of your traffic cannot navigate your site right now) I think that mostly you are just making your lists absolutely needlessly lengthy and complicated. If there is no need to divide content that many times why bother? You need to simplify your list... big time.

You also need to remove the title "suckerfish drop downs" from your <title> tag.

bazz

08-16-2005, 08:13 PM

Thanks Tristan,

I have repaired the CDATA so that it now woroks in ie 6 thouygh I have to work on the CSS still.
Thanks too for the tip about the title.

Bazz

Tristan Gray

08-16-2005, 08:35 PM

Great stuff, the menus are now displaying for me. I still think you should try to have less levels to your menus as most of the levels don't have anything in them anyway so you could probably find another way of grouping the accomodations that would be simpler. But they work as is now anyway and don't look too bad.

Another thing I noticed was that the banner photo is takne on a slight angle and so the perspective is a little off. This is not bad in itself but given the straight lines above and below it in the layout I noticed an odd optical illusion occuring that makes your page appear to be slanted slightly on a glance. It is a neat little effect but maybe not one you want to have. See if it's just me and my crazy mind because I do a lot of escher-esque designs for fun and have a bit of an eye for such distortions. Other than that maybe content could have less of a margin and be closer to a left justfication rather than centered.

Looking good though, a few more tweaks and you should be all set. Do the menus work in older IE versions? < IE 5.5?

bazz

08-17-2005, 11:44 AM

Thank you Tristan.

I haven't finished the css yet as I am trying to get the whole thing working - first major project and all that :) I'll have a bit of a job there when I get around to that :)

re. the left justification, did you mean that the text block should remain justified but moved left a little? Maybe something like that would lift the page from being so-o-o-o-o symetrical yet keep it clutter-free?

bazz

Tristan Gray

08-17-2005, 12:47 PM

Yeah that was the idea, it just seems a little too centred or something. Give it a try and if it looks uglier than before then just put it back heh.

The perspective thing is just because the solid edge on the roof of the house is slanted rather than straight and the surrounding lines are 'almost' parallel to it but not quite thus creating that diagonal sort of effect.

Sort of neat exploiting how the brain resolves images.