<nav>元素透明，没有任何以前的不透明度/透明度调整HTML/CSS

Question

我注意到我的导航栏是透明的，我希望它不是。我没有以前的透明度/透明度设置，会导致它继承属性。我想让我的导航栏不透明。

这里是CSS：

nav { 
margin: 20px auto; 
text-align: center; 
} 
nav ul ul { 
display: none; 
} 
nav ul li:hover > ul { 
display: block; 
} 
nav ul { 
font-size: 25px; 
background: white; 
padding: 0px; 
border-radius: 10px; 
border-style: solid; 
list-style: none; 
position: relative; 
display: inline-table; 
} 
nav ul:after { 
content: ""; 
clear: both; 
display: block; 
} 
nav ul li { 
float: left; 
} 
nav ul li:hover { 
background: black; 
} 
nav ul li:hover a { 
opacity: 1; 
color: white; 
} 
nav ul li a { 
display: block; 
padding: 15px 20px; 
color: black; 
text-decoration: none; 
} 
nav ul ul { 
background: #000000; 
border-radius: 0px 0px 10px 10px; 
padding: 0; 
position: absolute; 
top: 100%; 
} 
nav ul ul li { 
float: none; 
} 
nav ul ul li a { 
padding: 15px 20px; 
} 
nav ul ul li a:hover { 
background: #2E2E2E; 
border-radius: 10px; 
} 


#welcome_paragraph { 
position: relative; 
top: 50px; 
width: 500px; 
margin: auto; 
} 

下面是相应的HTML：

<nav> 
<ul> 
    <li><a href="#">Information</a> 
    <ul> 
     <li><a href="#">Getting Started?</a></li> 
         <li><a href="#">About Us</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Starter Kits</a></li> 
       <li><a href="#">Rebuildables</a> 
        <ul> 
         <li><a href="#">Genesis</a></li> 
         <li><a href="#">Dripper</a></li> 
         <li><a href="#">Silica/Cotton</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Mods</a> 
        <ul> 
         <li><a href="#">Mechanical</a></li> 
         <li><a href="#">Variable Voltage</a></li> 
        </ul>  
       </li> 
       <li><a href="#">Accessories</a></li> 
      </ul> 
     </nav> 
<p id="welcome_paragraph"> 
Welcome, blah blah (this text shows through the nav bar)<br /> 
</p> 

Answer 1

HTML

<nav> 
    <ul> 
     <li><a href="#">Information</a> 

      <ul> 
       <li><a href="#">Getting Started?</a> 
       </li> 
       <li><a href="#">About Us</a> 
       </li> 
       <li><a href="#">Contact</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Starter Kits</a> 
     </li> 
     <li><a href="#">Rebuildables</a> 

      <ul> 
       <li><a href="#">Genesis</a> 
       </li> 
       <li><a href="#">Dripper</a> 
       </li> 
       <li><a href="#">Silica/Cotton</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Mods</a> 

      <ul> 
       <li><a href="#">Mechanical</a> 
       </li> 
       <li><a href="#">Variable Voltage</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Accessories</a> 
     </li> 
    </ul> 
</nav> 
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar) 
    <br /> 
</p> 

CSS

nav { 
margin: 20px auto; 
text-align: center; 
} 
nav ul ul { 
display: none; 
} 
nav ul li:hover > ul { 
display: block; 
} 
nav ul { 
font-size: 25px; 
background: white; 
padding: 0px; 
border-radius: 10px; 
border-style: solid; 
list-style: none; 
position: relative; 
display: inline-table; 
} 
nav ul:after { 
content: ""; 
clear: both; 
display: block; 
} 
nav ul li { 
float: left; 
} 
nav ul li:hover { 
background: black; 
    position:relative; 
z-index:1; 
} 
nav ul li:hover a { 
color: white; 
position:relative; 
z-index:1; 
} 
nav ul li a { 
display: block; 
padding: 15px 20px; 
color: black; 
text-decoration: none; 
} 
nav ul ul { 
background: #000000; 
border-radius: 0px 0px 10px 10px; 
padding: 0; 
position: absolute; 
top: 100%; 
} 
nav ul ul li { 
float: none; 
} 
nav ul ul li a { 
padding: 15px 20px; 
} 
nav ul ul li a:hover { 
background: #2E2E2E; 
border-radius: 10px; 
} 


#welcome_paragraph { 
position: relative; 
top: 50px; 
width: 500px; 
margin: auto; 
    color:white; 
} 
body 
{ 
    background-color:blue; 
} 

更新CSS你的

nav ul li:hover { 
background: black; 
    position:relative; 
z-index:1; 
} 
nav ul li:hover a { 
color: white; 
position:relative; 
z-index:1; 
} 

Updated Fiddle

Answer 2

您是否尝试过;

nav { 
    background: white; 
} 

元素是透明的，除非您在它们或其继承的背景上设置背景。

编辑：如果这不帮助为我们设置一个小提琴jsfiddle.net。

Answer 3

在你的CSS

nav ul { 
font-size: 25px; 
background: white; 
padding: 0px; 
border-radius: 10px; 
border-style: solid; 
list-style: none; 
position: relative; 
display: inline-table; 
} 

背景是白色的。

如果您将背景更改为其他颜色，可能您的问题将会消失。希望它会帮助

干杯！