title: <nav> element transparent without any previous opacity/transparency adjustments HTML/CSS
body: <p>I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent. </p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>nav {
  margin: 20px auto; 
  text-align: center;
  } 
  nav ul ul {
  display: none;
  } 
  nav ul li:hover &gt; 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;
  }
  </code></pre>
  
  <p>Here is the corresponding HTML:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Information&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Getting Started?&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Starter Kits&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Rebuildables&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Genesis&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Dripper&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Silica/Cotton&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Mods&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Mechanical&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Variable Voltage&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;       
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Accessories&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  &lt;p id="welcome_paragraph"&gt;
  Welcome, blah blah (this text shows through the nav bar)&lt;br /&gt;
  &lt;/p&gt;
  </code></pre>