4 replies [Last post]
Nodoka
Offline
newbie
Last seen: 16 years 12 weeks ago
Joined: 2004-07-26
Posts: 7
Points: 0

I'm trying to remodel my site using css instead of my old frameset and javascript menu, but the nav section isn't working as advertised.

I'm using a nested unordered list inside a div. The relevant part of my stylesheet is:

#nav {padding: 0;
margin: 0px;
float : left;
width : 200px}

#nav ul {margin-left: 20px;
padding: 0;
line-height: 1.5;
width: 180px;
font-family: Verdana;
list-style-type: none;}

#nav li {font-weight: bold;
font-size: 14px; }

#nav li ul li {font-weight: normal;
line-height: 1.2;
font-size: 12px;}

#nav a, a:link, a:visited {color: navy;
text-decoration: none;}

#nav a:hover {color: #0033CC;
text-decoration: none;}

That formats my text the way I want it to look. (Welll, almost -- the submenu doesn't display in the smaller, lighter typeface in Firefox, though it does in IE and in my style editor's viewer. ) Adding

#nav li ul {display: none;}

makes the submenu go away in IE (not in Firefox). So far reasonably good; at least it's doing something. But when I add

#nav li:hover > ul {display: block;}

nothing happens. The submenu stays hidden.

What am I doing wrong? It's probably something really simple. Thank you all in advance.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Dropdown menu confusion

Ie doesn't like parent and child selectors, so using

#nav li:hover > ul {display: block;}

in an IE browser won't work. Not sure why though. Have a look for the suckerfish, that explains it all.

Verschwindende wrote:
  • CSS doesn't make pies

Nodoka
Offline
newbie
Last seen: 16 years 12 weeks ago
Joined: 2004-07-26
Posts: 7
Points: 0

Dropdown menu confusion

Problem is, I haven't even begun to address IE yet. This is Firefox I'm having the problem with, that's supposed to be so all-fired css compatible. No matter whether I do it with display:none or set the left margin way off the page, it hides fine but won't reappear. I must have written the hover wrong, but can't figure out how.

Once it works in Firefox so I'm sure the css is ok, then I'll worry about what I have to do to make it work in IE.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Dropdown menu confusion

Hi Nodoka,
Can you post a link to an example page, it would make it easier.

Nodoka
Offline
newbie
Last seen: 16 years 12 weeks ago
Joined: 2004-07-26
Posts: 7
Points: 0

Dropdown menu confusion

http://www.storyanime.com/workstuff/index.htm. This is bare-bones, just the page and the stylesheet. It now does work in Firefox, Netscape 7, and Opera (probably thanks to a whatever:hover script); it still doesn't work in IE or Avant. I've probably done something wrong with the hover, but can't for the life of me see what.

Sorry it took me so long; Real Life dumped on me bigtime and on top of that I had to redo a bunch of pages to make life tough for a bunch of hotlinking scum. [/i]