0
私は自主協会のウェブサイトを作成しています。まだウェブ開発を学んでいます。ナビゲーションの垂直セカンダリメニューがコンテンツに表示されません（以下のコンテンツは位置：position-relative）
ナビゲーションメニューのセカンダリ垂直メニュー（アクティビティタブなど）はコンテンツには表示されません。私はそれがポジションとして所有されている以下の内容によるものであることを発見しました：相対的な（col3クラス）このポジションを取り除くと：相対的な問題は解決しますが、後の改善のためにそれを保持する必要があります。このリンク http://slsaj.com/panduka/Contact.html
this screen shot shows the issue
実際に私はホームmenueで同じ問題を抱えているが（それは私が推測するJavaScriptとCSSから来ても、このpostionの問題が原因である）私はあまりにもそれを解決することができるだろう願っていますこの質問への回答
<
<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;