ナビゲーションドロップダウンを2列に並べるのに問題があります。コードを作成し、メニュー内で2つの別々のdivに設定しましたが、それらは互いにオーバーラップしているように見え、正しく整列させることができません。これは、私の問題を理解するための簡単なテスト例です。
CSS
#content{
background-color:#999;
width:1500px;
height:1500px;
}
#menu{
list style:none;
width:600px;
margin:30px auto 0px auto;
height: 25px;
padding:0px 20px 0px 20px;
}
#menu li{
float:left;
display:block;
text-align:left;
position:relative;
padding:4px 10px 4px 10px;
margin-right:7px;
margin-top:7px;
border:none;
}
#menu li a{
color:#000;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover .dropdown_2column{
left:-1px;
top:auto;
}
.dropdown_2column{
position:absolute;
width:400px;
left:-999em;
margin:4px auto;
text-align:left;
padding:5px 2px 10px 2px;
border: none;
/*background color*/
background:#888b81;
opacity:.5; /* FX/Opera/Safari/Chrome */
-ms-filter:"alpha(opacity=50)"; /* IE8 */
filter:alpha(opacity=50); /* IE6/IE7 */
}
.col_2{
display:inline;
float:left;
position:relative;
margin-left:2px;
margin-right:2px;
}
HTML
<body>
<div id="content">
<ul id="menu">
<li><a href="#">about us</a></li>
<li><a href="#">newsletters</a></li>
<li><a href="#">projects</a>
<div class="dropdown_2column">
<ul class="col_2">
<li><a href="#">Academic Review Follow-up</a></li>
<li><a href="#">Assistive Technology</a></li>
<li><a href="#">Autism</a></li>
<li><a href="#">Behavior & Effective School-wide Discipline</a></li>
<li><a href="#">Early Childhood</a></li>
<li><a href="#">The Family Involvement Network (FIN)</a></li>
<li><a href="#">I’m Determined</a></li>
</ul>
</div>
<div class="dropdown_2column">
<ul class="col_2">
<li><a href="#">Instructional Consultation Teams (ICT)</a></li>
<li><a href="#">Intellectual Disabilities</a></li>
<li><a href="#">Literary & Academic Instruction for Special Educators</a></li>
<li><a href="#">Literacy for Middle and High Schools: Strategic Instruction Model (SIM) and Content Literacy Continuum (CLC)</a></li>
<li><a href="#">Secondary Transition</a></li>
<li><a href="#">Standards-based Individualized Education Program (SB-IEP)</a></li>
<li><a href="#">Standards of Learning (SOL) Enhanced Scope and Sequence (ESS)</a> </li>
</ul>
</div>
</li>
<li><a href="#">staff</a></li>
<li><a href="#">kihd library</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>