Values to change in suckerfish menu

[Richard]

The style sheet shown below is from the suckerfish vertical menu.
http://www.htmldog.com/articles/suck.../vertical.html

I've added in a few minor changes to color code the levels.
I changed the width of the first level to 8em and get an unwanted space
between that and the 2nd level.
I'd like their to be no gap between the levels when I change the widths.
What's to change to do this?

Also, I do not understand the reason for "left: - 999em" in one definition.
However, changing the value came up with some interesting results.
<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;

}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;

}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 8em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : #FAA;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li li a {
width: 8em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : #0F0;
border : 1px solid black;
padding : 0 0.5em;
}

#nav li li li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : #DDF;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists
nested under hovered list items */
left: auto;
}

#content {
margin-left : 12em;
}
</style>

[Steve Pugh]

"Richard" <An*******@127. 001> wrote:

On Thu, 03 Mar 2005 17:17:58 -0600 kchayka wrote:

A much better approach, IMNSHO, is to put just the top-level menu links
in the HTML, which go to section index pages that contain the submenu
links. Use JavaScript to *add in* the submenus rather than just hide
them. That way, those who are able to use the DHTML menus as intended
get the "benefit" and the rest of us aren't punished for it.
Does this mean you'd prefer to rewrite a 50kb page just to add in one link?

No. He means that a new page with new content should be loaded when
the top level links are clicked on. (In some of these menus systems
top level itens are merely hooks for the DHTML and aren't actually
links). The content of this new page should contain all the links that
are children of the top level item in the DHTML menu.
That caters for users without JS.

And if such a page is 50kb then you're doing something wrong. CSS and
site furniture images should be cached. So unless you're adding new
images to the section page it really shouldn't be 50kb. 50kb is a lot
of HTML - http://www.sfsfw.net/a/author.php is less than 50kb.
I'm on dialup and I had to wait 3 minutes for your page to load.
You want me to do it all over again for one link? Bye bye.

You, and most other users, have the option of enabling JavaScript and
using the DHTML menu. This is a fallback for those users who can not
or who choose not to enable JavaScript.

On the file size issue:

suckerfish - HTML for all levels of menu is in every page so everyone
gets a bigger download.

kchayka - HTML for top level of menu is in every page. Rest of menus
are in JS file and only downloaded once.

So users with JS enabled get a slightly bigger download on the first
page but a smaller download on all other pages.
Users without JS enabled get a smaller download on every page but
sometimes have to click through an intermediate page or two to reach
their target.

Neither option is automatically better or worse.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>