Question

我无法将导航下拉菜单排成两列。我创建了代码并将它们设置为菜单内部的两个单独的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>

遇到2列下拉列表问题

0 个答案: