displaying menus in css

kohan · March 21st, 2007, 05:48 PM

Hi,
I am new to this forum and web designing, so go easy on me .

1. I have used div#navigation in the css file on all the possible ids/classes related to the menus yet the submenus are stil displaying when not used. Are there any other solution for this problem?

2. I have created the classes

Code:

div#menuv a.parent{
 background-image: url(../images/navdown.gif);
 background-position: right;
 background-repeat: no-repeat;
}
div#menuv a.parent:hover  /* attaches parent-arrow on all parents */
 {
 background-image: url(../images/nav_white.gif);
 background-position: right;
 background-repeat: no-repeat;
 }

How do I keep the picture of the hovered parent while browsing through the submenus? Is there a way for that?

3. I have noticed that in IE the submenus displays correctly but that does not hold in firefox. any advices on that?

Thanks for all your help.

spinal007 · March 21st, 2007, 07:17 PM

It's a lot easier to help if you send as a link...

But I can't tell you this:
1. Yes, give a class to parent menus which hides submenus...

2. Yes, you can keep the picture of the hovered parent while browsing through the submenus, but this will not work on IE without JavaScript or a hack (which we can discuss later)

3. Need to see it in action...

kohan · March 22nd, 2007, 12:02 PM

here is the link to the menu that i am trying to test out.

http://www.humanbee.com/testing/index.php

hope this clarifies a little as to what i was asking.
I have noticed that I had to hover back and forth between the menus a little to make the unwanted submenus to pop out. The funny thing is that the content of the submenus did not show up but the the blocks did..how strange.

Ryan Fait · March 23rd, 2007, 04:11 AM

It's not working at all in Safari...

kohan · March 23rd, 2007, 10:41 AM

Quote:

Originally Posted by Ryan Fait

It's not working at all in Safari...

I believe I have mentioned that I am new to this business, what are the things I should look for between the web browsers? I am only running it on IE because I figure that most people uses IE so anything else can come afterward. Any tips and advices are welcome. Thanks

karinne · March 23rd, 2007, 11:57 AM

Don't code your site for IE! Code it for Firefox.

Don't use IE as your primary testing browser

kohan · March 23rd, 2007, 06:08 PM

Okay so I have gone back to read up on how to create the css menu. After spending the whole afternoon (literally!) of consistently testing out the my code and from the tutorial I think it is finally working. I have tested on firefox and IE 7 it seems to be doing what I wanted now.

solved my questions from before.

Now I am facing something that I think just adding one more selector would solve the problem but couldn't figure out what..

here is the link http://www.humanbee.com/testing/index.php
If you hover over 3 -> 3.1 -> 3.1.1 -> 3.1.1.1, you'll see that 3 and 3.1 are highlighted but when you get to 3.1.1 and onto 3.1.1.1, 3.1.1 is no longer highlighted. I've noticed the difference between 3.1.1 and its predecessors is that 3.1.1 is actually a link as to just text.

I have altered

div#menuv li a:hover{
color: white;
background-color: #6495ED;
}

to

div#menuv li:hover, div#menuv li a:hover{
color: white;
background-color: #6495ED;
}

to create the highlighted (activated? not sure if i can call that) text.

any suggestions?

thanks

Ryan Fait · March 23rd, 2007, 07:28 PM

Congratulations, it works in Safari perfectly now.