CSS Drop Down Menu Question

[PcolaSteve]

I have created a simple CSS drop down menu that seems to be working fine with the exception of one thing. When the box drops down, it seems to be semi-transparent and you can see the text behind it causing the drop down selections to be hidden. I know there is a simple solution, I haven't been able to work it out. I have changed the drop down color of the list to dark colors, but this hasn't worked either.

Any suggestions?

Here is the CSS code.


<style type="text/css">

ul {
font-family: Arial, Verdana; /*Menu Font*/
font-size: 10px;? /*Menu Font Size*/
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #808080;/*menu background color*/
margin-left: 1px;
white-space: nowrap;
}

ul li a:hover { background: #617F8A; } /*Hover Color*/
li:hover ul {
background: #FFFF00;
display: block;
position: absolute; /*aligns drop down*/
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #808080;/*Dropdown menu background*/
}
li:hover li a:hover { background: #95A9B1; } /*li Hover background Color*/

</style>

<style type="text/css"> /*END MENU CCS*/

.auto-style2 {
text-align: center;
}
.auto-style3 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: x-large;
font-style: italic;
}
</style>


The shortest distance between two points is NOT a straight line; it's through a worm hole!

 

[audiopro]

Element 'background' should be 'background-color'

Keith

http://www.studiosoft.co.uk

 

[PcolaSteve]

It works either way. I tested it using 'background-color' just to be sure but the issue remains. The drop down box is the correct color, however the color is transparent. If I choose black as a background, the background shows through the white text. Any other color is basically transparent though and any option listed in the drop down menu are unreadable.

The shortest distance between two points is NOT a straight line; it's through a worm hole!

 

[audiopro]

'background-color' just makes it easier to read.

There are 2 errors in your CSS
4
ul Lexical error at line 3, column 17. Encountered: "?" (63), after : "" ;? /*Menu Font Size*/ margin: 0;

8
Parse Error [: 0; list-style: none; } ul li]

If that doesn't cure it, show a simple example of your HTML


Keith

http://www.studiosoft.co.uk

 

[PcolaSteve]

Well, I couldn't find a way to change these errors. I may just have to do a re-write as I have found another issue. No only are the drop downs transparent, I can't seem to be able to choose past the second item in the drop down box; the box just closes after I mouseover past the second selection in the drop down.

I can't seem to find any manuals that show how to create these types of CCS menus. All of what I have learned about CSS and HTML I have taught myself. Do you know of any manuals that would cover CCS drop down menus or what I should look for in case I have a book that may cover it but under a different category?

The shortest distance between two points is NOT a straight line; it's through a worm hole!

 

[ChrisHirst]

http://www.cssplay.co.uk/menus/

tons of them most with explanations.

http://www.alistapart.com/articles/hybrid/

http://www.alistapart.com/articles/dropdowns/

http://www.alistapart.com/articles/dynanav/

http://www.alistapart.com/articles/horizdropdowns/

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[PcolaSteve]

Thanks Chris.

These sites look like they will be a great help. I do design as a sideline with only three sites that I maintain. My forte' is in networking though I do enjoy web design. Thanks for the links!

Steve

The shortest distance between two points is NOT a straight line; it's through a worm hole!