Stylesheets - nav menu without using links

Author

nav menu without using links

hendedav@yahoo.com

2007-03-12, 11:19 pm

Gang,

I am trying to get a nav menu to perform a hover color change on
items, but seem to fail when using IE 6.x. I have included sample
code below to give an idea of what I am trying to accomplish:

<style>
..liHeader {
margin: 0px;
padding: 8px 0px 8px 5px;
background: #edf2f2;
font-weight: bold;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
border-left: 1px solid #fff;
border-right: 1px solid #ddd;
cursor: default;
}

#nav, #nav ul {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 12px;
font-weight: normal;
color: #01518C;
cursor: default;
}

#nav li li {
display: block;
text-decoration: none;
margin: 0px;
background: #edf2f2;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
border-left: 1px solid #fff;
border-right: 1px solid #ddd;
cursor: default;
}
#nav li li { padding: 2px 8px 2px 30px; }
#nav li li:hover { background: #e0e9e9; }
</style>

<ul id="nav">
<li class="liHeader">Topic header 1</li>
<li>
<ul>
<li>submenu option 1</li>
<li>submenu option 2</li>
<li>submenu option 3</li>
</ul>
</li>
<li class="liHeader">Topic header 2</li>
<li>
<ul>
<li>submenu option 1</li>
<li>submenu option 2</li>
<li>submenu option 3</li>
</ul>
</li>
<li class="liHeader">Topic header 3</li>
<li>
<ul>
<li>submenu option 1</li>
<li>submenu option 2</li>
<li>submenu option 3</li>
</ul>
</li>
</ul>

As you can see there are nested ul's because I would like different
formatting to indicate "headers". I don't want to use "a" link's
because some of these options may have a cascading menu associated
with them, so a link would not work. I can get this to work just fine
in FF, but not IE. Does anyone have any suggestions?

Thanks,
Dave

Dirk

2007-03-13, 7:18 am

hendedav@yahoo.com wrote in news:1173754532.209313.9530
@q40g2000cwq.googlegroups.com:

>
> As you can see there are nested ul's because I would like different
> formatting to indicate "headers". I don't want to use "a" link's
> because some of these options may have a cascading menu associated
> with them, so a link would not work. I can get this to work just fine
> in FF, but not IE. Does anyone have any suggestions?
>

'hover' only works on 'a' in IE. You might consider using a dead link
(link that goes nowhere) to get the effect to work.

--
Dirk

Jukka K. Korpela

2007-03-13, 7:18 am

Scripsit Dirk:

> 'hover' only works on 'a' in IE.

:hover works only on _links_ (<a> with href) on IE 6 but more or less by the
book (CSS spec) on IE 7.

> You might consider using a dead link
> (link that goes nowhere) to get the effect to work.

Well, the situation is probably already so messy and confusing to users that
some extra confusion would be suitable, along with the catastrophe theory
(the sooner you end up with something that even the authors sees as
catastrophic, the sooner there will be a fresh start). Dead links make
tabbing nasty, among other things.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Dirk

2007-03-13, 7:18 am

"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote in
news:vGuJh.15500$h86.2881@reader1.news.saunalahti.fi:

> Scripsit Dirk:
>
>
>:hover works only on _links_ (<a> with href) on IE 6 but more or less
>:by the
> book (CSS spec) on IE 7.

It does ? That's some improvement.

>
> Well, the situation is probably already so messy and confusing to
> users that some extra confusion would be suitable, along with the
> catastrophe theory (the sooner you end up with something that even the
> authors sees as catastrophic, the sooner there will be a fresh start).
> Dead links make tabbing nasty, among other things.

LOL, thanks for adding to my first try of giving advice in this ng.
Never heard of the catastrophe theory, but it sure happened to me, and
probably will happen to me again. A lot of playing, trying and fiddling
before deciding that KISS (Keep It Simple Stupid) is just as good if not
better.

--
Dirk

Andy Dingley

2007-03-13, 7:18 am

On 13 Mar, 02:55, hende...@yahoo.com wrote:

> I can get this to work just fine in FF, but not IE.

IE only supports :hover on <a>

So use an <a href="..." > and set its width to 100%. You can use a
link href of "#" if you want. Just look around the web for CSS
nested menus, there are many examples of them.

hendedav@yahoo.com

2007-03-13, 7:29 pm

On Mar 13, 6:49 am, "Andy Dingley" <ding...@codesmiths.com> wrote:
> On 13 Mar, 02:55, hende...@yahoo.com wrote:
>
>
> IE only supports :hover on <a>
>
> So use an <a href="..." > and set its width to 100%. You can use a
> link href of "#" if you want. Just look around the web for CSS
> nested menus, there are many examples of them.

Thanks for the advice guys. I kinda came to that conclusion from
trying various types of tags in the li's (eg spans, divs, labels, etc)
and non worked by the href's. I have put them back in and now have a
question if someone clicks them (on purpose or by accident). The ones
that are actually links to other pages will work as designed with the
"a href" tags, but what can I put in the href part for the ones that
are going to be used for menus. I tried putting the lb sign (#), but
that throws and error in IE. If I leave them blank, they change IE
into Windows Explorer (for local files). Any suggestions on this or
do I just have to use the lb sign and accept that IE will throw the
error?

Thanks,
Dave