0

这是我的情况：

我想做一个 CSS 下拉菜单。UL通常我可以用嵌入式s做到这一点。但是，我想制作一个多列下拉菜单。不过，我需要下拉菜单具有动态宽度。

我已经用表格完成了这个，但我想看看我是否可以用DIVs 来完成。

我的下拉UL/的 CSSLI是：

#nav ul {
margin: 0;
padding: 0;
list-style: none;
}

#nav ul li {
position: relative;
float:left;
margin-left:16px;
}

#nav li ul {
position: absolute;
display: none;
z-index:10;
}

#nav li:hover ul { 
display:block;
}

#nav ul li a.main {
display: block;
height:47px;
text-decoration: none;
color: #fff;
padding: 0 16px 0 16px;
line-height: 48px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
font-weight:bold;
}

#nav ul li a.main:hover {
background:#FFF;
color:#222222;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}

这将使用以下 HTML 创建带有下拉菜单的水平导航：

<ul>
 <li><a class="main">HO Scale</a>
   <ul>

   </ul>
 </li>
</ul>

使用表格，我可以把它放在内部UL并使用这个 CSS

.inner{
    float:left;
    background:#FFF;
    border:1px solid #000;
    border-top:0;
    padding:12px 0 12px 12px;
}

通过在这些 inner s 中放置一个Tablewith 类 inner ，UL它将完美地工作，将它们隔开，3 列，所有动态宽度。

我想用DIVs 来完成，但问题是当我浮动（或不浮动）“内部”DIV时，它会将内部的所有链接放在一条线上，我似乎无法制作它们并肩走。如果我把DIVOUTSIDE thee 下拉菜单放在外面，它工作得很好。

有什么建议么？

编辑：

这就是它的外观（对表格也是如此）：

在此处输入图像描述

这是DIVs 的样子（错误）

在此处输入图像描述

4

0 回答 0