PcolaSteve
Programmer
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!
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!