4 replies [Last post]
marcus
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-04-27
Posts: 2
Points: 0

I have started a redesign of http://www.capitalsecurities.com.au and have created the test site at http://www.bit3group.com/test/~acs_new/index.html.

The problem I am having is that the background colour during mouse over, of a top level navigation with child elements, does not span the whole width of the block. I had to set the width of the parent elements thinner so the navigation worked in an 800x600 screen. The child navigation wording is longer than the parent so they had to be wider.

The current version works perfect in Opera 7.23. I only have a problem with word wrap (the second line is not part of the block) in a child element of the navigation in NS 7.1, Mozilla 1.6 and Firefox 0.8.

I had IE working but no other browsers if I set the width in the following line to 100%.

div#menu li {float: left; position: relative; width:8em; background: #999999; height: 2em; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;}

Can anyone save me from the mental institution with a fix for my problem.

Thanks in advance for any help that can be offered.

Cheers,

Marcus

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 17 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Navigation problem using list items

Have you set the a:hover state to display: block; ?

This will need to be done since, an a link is inline, thus will only span the space that the characters (or image) within occupy.

The next sentence is true. The previous sentence is false. Discuss...

marcus
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-04-27
Posts: 2
Points: 0

Navigation problem using list items

Quote:
Have you set the a:hover state to display: block; ?

co2,

Yes. Here is a sample part of what I started with.

li>ul {top: auto; left: auto;}
li:hover ul , li.over ul {display: block; width:9em;}
ul li a {padding-left:5px; padding-right:5px;}
ul li a:hover {color:#FFFFFF; background:#990000; padding-left:5px; padding-right:5px; z-index:0px;}

I have made hundreds of changes and still can't get a UL with LI as the navigation to work in all browsers at one time.

Is there another way to do a horizontal top level navigation with drop down menu using CSS so the search engines can index the site?

Cheers,

Marcus

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 17 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Navigation problem using list items

I mean add the display: block; to the actual link CSS, the 'a' rule.

Here's a simple example (sans hide effects):

http://pub.c-o2.net/cssf/ddList.htm

The next sentence is true. The previous sentence is false. Discuss...

janim
Offline
Regular
phinland
Last seen: 18 years 15 weeks ago
phinland
Joined: 2004-04-26
Posts: 11
Points: 0

Navigation problem using list items

This one seems cross-browser and fairly easy to understand.
http://www.gazingus.org/html/menuDropdown.html