I'm trying to create a menu that does not move independent of the user's scrolling on the page using position fixed
.
But I'm having a problem with transparency, whenever the menu finds other content, it's transparent.
Before I used a menu with position absolute
, and the menu did not appear to have transparency. I researched google tried some things but I could not solve it, I got to opacity: 100%
but also did not solve.
Follow the css code from my menu, and images showing what happens. Does anyone know how to solve this problem?
div#menu
{
width: 100%;
background-color: rgba(60,60,65,1);
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
position: fixed;
top: 0px;
left: 0px;
}
div#menu ul
{
text-align: left;
}
div#menu li
{
display: inline-block;
padding: 0px 0px 0px 0px;
margin: 0px 25px 0px 25px;
}
div#menu a
{
font-family: Arial, sans-serif;
font-size: 16pt;
text-decoration: none;
color: white;
}
div#menu a:hover
{
color: rgba(50,50,255,1);
text-decoration: underline;
}