Tue, 2004-04-27 11:21
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
Tue, 2004-04-27 11:27
#1
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.
Tue, 2004-04-27 11:48
#2
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
Tue, 2004-04-27 12:04
#3
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):
Tue, 2004-04-27 12:32
#4
Navigation problem using list items
This one seems cross-browser and fairly easy to understand.
http://www.gazingus.org/html/menuDropdown.html