Help with CSS Menu

B

Brandon

I can't get the my CSS menu to display properly. Not sure what's going
on, but I'm probably not designing the nested list styles correctly.
Any help is much appreciated.

Thanks.

Html:

<SNIP>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="nav">
<ul>
<li>2007
<ul>
<li>05
<ul>
<li><a href="dat\2007\05\03\2007-05-03.html">03</a>
<ul>
<li><a href="dat\2007\05\03\2007-05-03.html#11">11</
a></li>
<li><a href="dat\2007\05\03\2007-05-03.html#12">12</
a></li>
<li><a href="dat\2007\05\03\2007-05-03.html#13">13</
a></li>
</ul>
</li>
<li><a href="dat\2007\05\04\2007-05-04.html">04</a>
<ul>
<li><a href="dat\2007\05\03\2007-05-04.html#11">11</
a></li>
<li><a href="dat\2007\05\03\2007-05-04.html#12">12</
a></li>
<li><a href="dat\2007\05\03\2007-05-04.html#13">13</
a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>2008</li>
<ul>
<li>05
<ul>
<li><a href="dat\2007\05\03\2007-05-03.html">03</a>
<ul>
<li><a href="dat\2007\05\03\2007-05-03.html#11">11</
a></li>
<li><a href="dat\2007\05\03\2007-05-03.html#12">12</
a></li>
<li><a href="dat\2007\05\03\2007-05-03.html#13">13</
a></li>
</ul>
</li>
<li><a href="dat\2007\05\04\2007-05-04.html">04</a>
<ul>
<li><a href="dat\2007\05\03\2007-05-04.html#11">11</
a></li>
<li><a href="dat\2007\05\03\2007-05-04.html#12">12</
a></li>
<li><a href="dat\2007\05\03\2007-05-04.html#13">13</
a></li>
</ul>
</li>
</ul>
</li>
<li>06</li>
</ul>
<li>2009</li>
</ul>
</div>
</body>
</html>

</SNIP>

CSS:

<SNIP>
#nav ul
{
margin: 0;
padding: 0;
list-style: none;
width: 50px;
display: block;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #cccccc;
border-bottom: 1px, solid, #000000;
}

/* Position list items stacked vertically.*/
#nav li
{
position: relative;
}

/* Create sub-menu to appear to the right of its parent menu item when
that item is hovered over.*/
#nav li ul
{
position: absolute;
top: -1px;
left: 100%;
display: none;
}
/* */
#nav ul ul ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
border-bottom: 0;
}

/* Sub-menu hover */
#nav ul ul,
#nav ul ul ul,
#nav ul li:hover ul ul ul,
#nav ul ul li: hover u1 u1
{ display: none; }

#nav ul li:hover ul,
#nav u1 ul li:hover ul,
#nav ul ul ul li:hover ul
{ display: block; }

</SNIP>
 
J

Jukka K. Korpela

Scripsit Brandon:
I can't get the my CSS menu to display properly. Not sure what's going
on, but I'm probably not designing the nested list styles correctly.
Click to expand...

I'm sure you need to fix something.

(To get a more specific answer, ask a more specific question. Just telling
that something does not "display properly" is pointless.)
<SNIP>
Click to expand...

Post a URL, not snippets.
<li><a href="dat\2007\05\03\2007-05-03.html">03</a>
Click to expand...

The "\" character is not allowed in URLs.
 
B

Brandon

Scripsit Brandon:


I'm sure you need to fix something.

(To get a more specific answer, ask a more specific question. Just telling
that something does not "display properly" is pointless.)


Post a URL, not snippets.


The "\" character is not allowed in URLs.
Click to expand...

Please refer to:
http://www.imfx.com/test/

I only want sub-menus list indices to display when it's parent list
index is hovered over. It's not doing that. You can see that two list
trees are overlapping if you hover over 2007 because it's displaying
the entire tree hierarchy below 2007, not just 05.

Any ideas how to fix this?

Thanks,
-Brandon
 
J

Jukka K. Korpela

Scripsit Brandon:
Please refer to:
http://www.imfx.com/test/
Click to expand...

You have about one HTML markup error (probably a serious one) and three CSS
syntax errors.
I only want sub-menus list indices to display when it's parent list
index is hovered over. It's not doing that.
Click to expand...

The whole idea is pointless. "Expanding menus" are bad for usability - and
accessibility.
 
J

John Hosking

Here, you probably really mean "to display the way I want it," as
opposed to "to display properly." In FF, at least, I think it's being
displayed properly. In IE <7, :hover is not supported for elements

Brandon, here's where you should have inserted the URL (rather than down
below). I know Google Groups doesn't make it simple for you. But you can
quote the previous poster's message, inject your responses at the
relevant points, and delete the parts which aren't directly relevant to
your reply.

You don't need to quote other posters' signatures. In future posts, feel
free to manually trim the sig separator and what follows.
http://www.imfx.com/test/

I only want sub-menus list indices to display when it's parent list
index is hovered over. It's not doing that. You can see that two list
trees are overlapping if you hover over 2007 because it's displaying
the entire tree hierarchy below 2007, not just 05.

Any ideas how to fix this?
Click to expand...

Yes. When you use rules like

#nav ul li:hover ul,
#nav u1 ul li:hover ul,
#nav ul ul ul li:hover ul
{ display: block; }

you are specifying the display (as block) of *all* the ul elements which
are descendants of #nav ul li:hover (or #nav u1 ul li:hover or #nav ul
ul ul li:hover). So you've told the browser to display all the <ul>s
which are under the hovered list item.

What I'm guessing you want is to have the menus expand only when the
immediate parent is being hovered. For that, you need to specify more
rules, more fully. Child selectors might help, but child selectors are
not supported by IE 5, 5.5 and 6. Don't know about IE7.

Looks tedious, doesn't it? And this is just your little test page; I
imagine you foresee pages in the future with more content (i.e., more
cascading menus with fuller lists). FWIW, you might be happy with some
of the pre-done menus at Listamatic
(http://css.maxdesign.com.au/listamatic/). You'll have to work out the
nesting yourself, though.

Even more tedious is the user's experience, because it can be really
difficult the manipulate the mouse so as to successfully negotiate the
weavy path of your menu. One false twitch and the whole menu can
disappear out from under your visitor.

HTH
 
A

Adrienne Boswell

The whole idea is pointless. "Expanding menus" are bad for usability -
and accessibility.
Click to expand...

Amen to that! I can't stand the things, especially since I can't seem to
get my mouse over the link before the darned thing collapses again. I
don't like it any UI -- web, programs, etc.
 
B

Brandon

I didn't really ask for advice on usability. This is what I wanted and
I wasn't sure how to fix the desired result, at first. Kudos to John
for the tips. Besides, some people have skills with the mouse...
 
J

Jukka K. Korpela

Scripsit Brandon:
I didn't really ask for advice on usability.
Click to expand...

This isn't a helpdesk. You ask whatever you like, we discuss it the way we
like. If our discussion happens to answer your question, it's often less
useful than the rest, especially since the answers are so often wrong.

This is a discussion forum, where you are expected to quote or paraphrase
the message you are commenting on.
Besides, some people have skills with the mouse...
Click to expand...

And some people have a clue, at times.
 
E

El Kabong

I've never liked them either as they're particularly frustrating to older
users.

What do you recommend as an alternative that still allows fairly smooth and
quick navigation to all parts of the site? Is there a way to make them
remain expanded until something, whether in the list or elsewhere, is
clicked?

El
 
A

Adrienne Boswell

Gazing into my crystal ball I observed "El Kabong"
<[email protected]> writing in

Please don't top post. My reply is at the bottom.
I've never liked them either as they're particularly frustrating to
older users.

What do you recommend as an alternative that still allows fairly
smooth and quick navigation to all parts of the site? Is there a way
to make them remain expanded until something, whether in the list or
elsewhere, is clicked?

El
Click to expand...

I did something for Holy Family <http://www.hfglendale.org>, that has
some older parishoners. Once you click on the plus sign, the menu
expands and stays that way until you collapse it again. The entire menu
is generated server side, no javascript or flyouts at all.
 
B

Bergamot

El said:
What do you recommend as an alternative that still allows fairly smooth and
quick navigation to all parts of the site?
Click to expand...

Make a separate site map page and link to it on every page.
 
E

El Kabong

Adrienne Boswell said:
Gazing into my crystal ball I observed "El Kabong"
<[email protected]> writing in
Please don't top post. My reply is at the bottom.
Click to expand...

My apologies. The only group with whom I've previously posted seemed to
prefer top posting and almost never trimmed responses. I'll try to be more
carefull with this group as I see some members are extremely sensitive to
form. I really do appreciate their comments.

(snip)
I did something for Holy Family <http://www.hfglendale.org>, that has
some older parishoners. Once you click on the plus sign, the menu
expands and stays that way until you collapse it again. The entire menu
is generated server side, no javascript or flyouts at all.
Click to expand...

This looks good and is certainly the preferred approach but, unfortunately
for me, I am unfamiliar with ASP. Perhaps I can either devise or locate
something similar using ColdFusion, which I have used for about 6 or 7 years
or PHP which I am just beginning to learn.

Thanks again for your advice.

El
 
E

El Kabong

Bergamot said:
Make a separate site map page and link to it on every page.
Click to expand...

It seems that would surely work but isn't it a little cumbersome? Do you
have an example online?

Thanks,

El
 
F

freemont

I did something for Holy Family <http://www.hfglendale.org>, that has
some older parishoners. Once you click on the plus sign, the menu
expands and stays that way until you collapse it again. The entire menu
is generated server side, no javascript or flyouts at all.
Click to expand...

Under Clergy, both links get 404's. Just FYI. :)

Very pretty site.
 
E

El Kabong

freemont said:
Under Clergy, both links get 404's. Just FYI. :)
Click to expand...

That happened to me, too, but I clicked back and tried again and it came up
right away.

Could the timing of the server response be too slow or is FireFox timing out
too fast or something other kind of sync problem?

El
 
B

Bergamot

El said:
It seems that would surely work but isn't it a little cumbersome?
Click to expand...

A site map is no more cumbersome (actually much less, for me) than those
dreaded drop-down or fly-out menus that require dexterity with a mouse
that I lack. They are often poorly designed and don't adapt well to my
particular browsing environment. I loathe the things.

Besides, with a site map, you can do things like 'find in page', or
browse the whole thing at your own pace and not worry about silly
time-outs or precise cursor placements. Much less trouble, IMO.
Do you have an example online?
Click to expand...

You've never been to a site that has a site map? That seems odd.
 
E

El Kabong

You've never been to a site that has a site map? That seems odd.
Click to expand...

Sheltered, or in this case perhaps, "not exposed" life, I guess. I do not
recall ever having to click back and forth from a site map to a page, back
to the site map, on to another page, back to the site map again, etc., etc.
Or perhaps you meant to have the pages targeted to open new windows. That
might not be quite as clumsy or, in real life, could be even more of a
nuisance.

Perhaps I have imagined the concept incorrectly. That's why an actual
example would be helpful.

El
 
E

Ed Mullen

Adrienne said:
I did something for Holy Family <http://www.hfglendale.org>, that has
some older parishoners. Once you click on the plus sign, the menu
expands and stays that way until you collapse it again. The entire menu
is generated server side, no javascript or flyouts at all.
Click to expand...

Just FYI, several of the links are returning errors such as:

Microsoft VBScript compilation error '800a0411'

Name redefined

/advert_inc.asp, line 2

dim hasadverts, advertarr, sql, rs
 
B

Bergamot

El said:
I do not
recall ever having to click back and forth from a site map to a page,
Click to expand...

I wasn't suggesting that a site should use *only* a site map for
navigation. But for a large site, I find them a lot easier to work with
than those awful multi-level navigation menus. I think top-level links
should be accessible from every page. It's the links to sub pages that
are under debate.

Why do you think every sub page need to be accessible from every other
sub page? Make them accessible within their (sub)section and leave the
rest out. Much less complicated that way.
Or perhaps you meant to have the pages targeted to open new windows.
Click to expand...

Never in a million years.
 
E

El Kabong

I wasn't suggesting that a site should use *only* a site map for
navigation. But for a large site, I find them a lot easier to work with
than those awful multi-level navigation menus. I think top-level links
should be accessible from every page. It's the links to sub pages that
are under debate.

Why do you think every sub page need to be accessible from every other
sub page? Make them accessible within their (sub)section and leave the
rest out. Much less complicated that way.
Click to expand...

I agree that is a much preferable site plan to the "fly-away" drop downs and
if it was always my choice alone, that's the way it would always be. But
clients, for some strange reason, like "gizmos" and sometimes will choose a
designer based on who will give them them the most irritaing, useless,
stupid gadgets on their pages, such as animated gifs, decorative Java
applets, and, most of the time, Flash.

For situations where clients make a demand, it would be great if there was a
way to "latch" the submenu in a similar fashion to Adrienne's asp menus. My
problem is that I don't use asp and it would take too much of my time to
learn it just for a single "gizmo".

Surely, (not "shirley") there must be a JavaScript or other technique that
will latch a submenu, isn't there?
Never in a million years.
Click to expand...

Thought not. (Just kidding.)

El
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Horizontal menu bar header 2
I need help fixing my website 2
Need help with code on website (noob) 2
CSS menu problems with IE 7 2
Align img inside nav tabs section 5
Buttons lining up 1
Help needed with code 5

Members online

Total: 29 (members: 1, guests: 28)
Robots: 490

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top