Navigation vertikales sekundäres Menü zeigt nicht über den Inhalt (der Inhalt hat Position: positionsrelativ)

Question

Ich mache eine Website für unsere freiwillige Vereinigung. Immer noch lernen Web-Entwicklung.

Das sekundäre vertikale Menü im Navigationsmenü (z. B. im Tab "Aktivitäten") wird nicht über den Inhalt angezeigt. Ich fand heraus, dass es aufgrund des Inhalts unten als position: relative (col3 class) möglich ist, wenn ich diese Position entferne: relativ löst sich das Problem aber ich muss es für spätere Verbesserungen behalten, man kann die Website in Link http://slsaj.com/panduka/Contact.html

this screen shot shows the issue

eigentlich habe ich das gleiche Problem in Heimmenü (es auch aufgrund dieser Postion Ausgabe ist von JavaScript und CSS kommt glaube ich) ich hoffe, es zu lösen zu der Lage wäre, mit der Antwort auf diese Frage

<

 <div class="body1"> 
      <div class="main"> 
     <!-- header --> 
       <header> 
        <div class="headerbox"> 

         <a href="" id="logo"></a> 
         <a href="" id="logo2"></a> 
        <nav> 

          <div class="brand"> 
          <h1>xxxxx Assoication in Japan </h1> 
          </div> 
          <div id="main-nav3"> 
          <ul id="menu"> 
           <li ><a href="" >Home<span class="drop-down"></span></a> 
            <ul> 
            </ul> 
           </li> 
           <li ><a>Activities<span class="drop-down"></span></a> 
            <ul> 
             <li ><a href="" target="_blank" id="events" >Events</a></li> 
             <li><a href="tharanga.html" id="events2" >Tharanga Magazine</a></li> 
             <li><a href="Conference.html" >Research Conference</a></li> 
            </ul> 
           </li> 
           <li ><a href="" > Committee<span class="drop-down"></span></a> 
            <ul> 
            </ul> 
           </li> 

           <li id="menu_active"><a href="">Contact<span class="drop-down"></span></a> 
            <ul> 
            </ul> 
           </li> 
            <li ><a href="" >About us<span class="drop-down"></span></a> 
            <ul> 
            </ul> 
           </li> 
          </ul> 
         </div> <!-- menu --> 
        </nav> 

        </div> 
       </header> 
     <!--/header --> 
     <!-- content --> 
       <article id="content"> 
        <div class="wrapper"> 
         <div class="box1"> 
          <div class="line1 wrapper"> 
           <section class="col1"> 
            <h2><strong>O</strong>ur<span> Details</span></h2> 
            <strong class="address"> 
             President:<br> 
             Telephone:<br> 
             E-Mail:<br> 
             Secretary:<br> 
             E-Mail:<br> <br> 
             Fb: 
            </strong> 
            Mr. xxxx<br> 
            080<br> 
            <a href="">xxxx[at]gmail.com</a> <br> 
            Ms. xxxxx<br> 
            <a href="">xxxx[at]gmail.com</a> <br> <br> 
            <a href="" target="_blank">@xxxxxxxxx</a> 
           </section> 
           <section class="col2 pad_left1"> <!-- This is the cause for this problem ***** --> 
            <h2 class="color2"><strong>S</strong>ubcribe to<span> email database</span></h2> 
            <p class="pad_bot1"> 
             You can subcribe to out email database by filling the following form <br> 
             <a href=""_blank" class="button2 color2">Subcribe !</a> 

            </p> 

           </section> 
          </div> 
         </div> 
        </div> 

      <!-- This col2 position:relative is the cause for this problem ***** --> 
      .col2 {margin:0 6px;width:560px;position:relative} 

      #main-nav3 { 
      float: left; 
       width: 700px; 
       z-index: 30; 

      } 
      #main-nav3 ul { 
       font-size:12px; 
       list-style: none; 
      } 
      #main-nav3 ul li { 
       float: left; 

      } 
      #main-nav3 ul li:first-child { 
       border: none; 
      } 
      #main-nav3 ul li a { 
       display: block; 
       position: relative; 
       width: auto; 
       text-decoration: none; 
       font-size:17.8px; 
      } 
      #main-nav3 ul li a span.drop-down { 

      } 
      #main-nav3 ul li:hover { 
       background: pink; 

      } 
      #main-nav3 ul li ul { 
       display: none; 
      } 
      #main-nav3 ul li:hover ul { 
       background: brown; 
       display: block; 
       position: absolute; 
      } 
      #main-nav3 ul li ul li { 
       float: none; 
       display: block; 
       border-left: none; 
       position: relative; z-index:10; 
      } 
      #main-nav3 ul li ul li a { 
       width: auto; 
       border-top: dotted 1px #7dad16; 
       color: yellow; 

Answer 1

In der Klasse .headerbox css, Opazität: 0,9; verursacht das Problem. Kommentieren Sie das aus. auch in # Hauptnav3 ul li ul {...} add Z-Index: 10; Das wird das Problem mit dem Dropdown-Menü beheben.