难以创建具有多列的CSS菜单

时间：2013-05-09 21:52:42

标签： css drop-down-menu multiple-columns

我已经阅读了这个网站上的一些类似的主题，并找到了一些有用的提示，但我仍然难以在我的CSS下拉菜单中使列正常工作。测试网站位于：http://iphonebuy-host1.gaiahost.net/index.html

在某种程度上，我正在使用本文中方法4的想法 - http://alistapart.com/article/multicolumnlists - 但是这是针对XHTML而我使用的HTML，也许这会导致我的问题？

主要的是第二列中的列表项不会粘在标题的底部。根据引用的文章，在.reset上设置负边距应该会将整个第二列放在我想要的位置，但只有标题（应用了.reset）才会向上移动。

我应该说你可能要在Firefox中查看我的菜单，看看我在说什么 - 到目前为止它在Safari中更加混乱，我甚至没有尝试过IE或Chrome。

CSS 

/** top navigation menu **/
.topnav {
    list-style: none;
    background-color: #FFF;
    font: 1.313em arial, sans-serif;
    color: #0071BC;
    margin: -1.8em 0 1.2em 25em;
    text-align: center;
}
.topnav li {
    position: relative;
    display: inline;
    padding: 0 .5em 0 .5em;
    border: none;
}
.topnav a { 
    display: inline-block;
}

/** for drop-down menu **/
.topnav li ol {
    background: #fff;
    list-style: none;
    position: absolute;
    width: 15.5em;
    font: .8em arial, sans-serif;
    padding: 0 1em .5em .5em;
    margin-top: -.1em;
    left: -9999px;
    z-index: 200;
    -webkit-border-radius: 0 0 .5em .5em;
       -moz-border-radius: 0 0 .5em .5em;
            border-radius: 0 0 .5em .5em;
    -webkit-box-shadow:  0 3px 2px 1px #ccc;
       -moz-box-shadow:  0 3px 2px 1px #ccc;
            box-shadow:  0 3px 2px 1px #ccc;
}  
.topnav li li h1 {
    font: bold 1.2em arial, sans-serif;
    white-space: nowrap;
    margin: .5em 0 .5em 0;
}
.topnav li li h2 {
    font: 1em arial, sans-serif;
    white-space: nowrap;
}
.topnav li li a {
    white-space: nowrap;
    display: block;
}
.topnav li: hover ol {
    left: 0;
    margin-left: -.9em;
}
.topnav li: hover a {
    color: #99CCCC;
}
.topnav li: hover ol a {
    color: #0071BC;
}
.topnav li: hover ol a: hover {
    color: #99CCCC;
}
.topnav li li.column1 { 
    margin-left:  0em;
    width: 6.8em;
    float: left;
    line-height: 1.5em;
}
.topnav li li.column2 { 
    margin-left: 10em;
    width: 4em;
    float: left;
    line-height: 1.5em;
}
.topnav li li.reset {
    margin-top: -10.8em;
}

HTML 

<div class="topnav">
  <ol>
    <li><a href="index.html" class="vertical-line">Home</a></li> 
    <li><a href="#" class="vertical-line">Get Quote</a>
      <ol>
        <li class="column1"><h1>Select phone:</h1></li>
        <li class="column1"><h2>CDMA</h2></li>
        <li class="column1"><a href="cdma3gs8gb">3GS 8GB</a></li>
        <li class="column1"><a href="cdma3gs16gb">3GS 16GB</a></li>
        <li class="column1"><a href="cdma4-8gb">4 8GB</a></li>
        <li class="column1"><a href="cdma4-16gb">4 16GB</a></li>
        <li class="column1"><a href="cdma4s16gb">4S 16GB</a></li>
        <li class="column1"><a href="cdma4s32gb">4S 32GB</a></li>
        <li class="column2 reset"><h2>AT&amp;T GSM</h2></li>
        <li class="column2"><a href="att3gs8gb">3GS 8GB</a></li>
        <li class="column2"><a href="att3gs16gb">3GS 16GB</a></li>
        <li class="column2"><a href="att4-8gb">4 8GB</a></li>
        <li class="column2"><a href="att4-16gb">4 16GB</a></li>
        <li class="column2"><a href="att4s16gb">4S 16GB</a></li>
        <li class="column2"><a href="att4s32gb">4S 32GB</a></li>
      </ol>
    </li>
    <li><a href="about.html">About</a></li>
  </ol>
</div>

2 个答案:

答案 0 :(得分：2)

问题中的代码会浮动列表项。它所基于的method 4 approach没有。这一改变阻止了该方法有机会按预期工作。

在这种情况下，最好保持与方法完全一致，或者完全不同的方向，根本不模仿它。陷入中间 - 不一致地遵循这种方法 - 可能会造成最大麻烦。

将HTML拆分为一口大小的块

如果更改HTML，您将更容易设计样式。不要将所有内容放入单个列表并将列表拆分为2列，而是尝试将HTML拆分为2个单独的列表。

可能还需要添加几个包装器div。如下所示：

<div class="topnav">
  <ul>
    <li><a href="index.html" class="vertical-line">Home</a></li> 
    <li><a href="#" class="vertical-line">Get Quote</a>
      <div class="dropdown">
        <h1>Select phone:</h1>

        <div class="columns clearfix">   <!-- add a reliable clearfix -->
          <div class="column1">   <!-- floated left -->
            <h2>CDMA</h2>
            <ul>
              <li><a href="cdma3gs8gb">3GS 8GB</a></li>
              <li><a href="cdma3gs16gb">3GS 16GB</a></li>
              ...
            </ul>
          </div>

          <div class="column2">   <!-- floated left -->
            <h2>AT&amp;T GSM</h2>
            <ul>
              <li><a href="att3gs8gb">3GS 8GB</a></li>
              <li><a href="att3gs16gb">3GS 16GB</a></li>
              ...
            </ul>
          </div>
        </div>

      </div>
    </li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>

将下拉列表的相关部分拆分为单独的HTML元素，可以更加灵活地设置样式。

从语义上讲，这种类型的HTML要好得多，因为h1和h2标记不会被视为与特定手机型号相同的内容类型。这有助于SEO和可访问性。

答案 1 :(得分：0)

使用以下CSS 

.topnav {
list-style:none;
background-color:#FFF;
font:1.313em arial, sans-serif;
color:#0071BC;
margin:-1.8em 0 1.2em 25em;
text-align:center;
}

.topnav li {
position:relative;
display:inline;
padding:0 .5em 0 .5em;
border:none;
}

.topnav a { 
display:inline-block;
}

.topnav li ol {
background:#fff;
list-style:none;
position:absolute;
width:15.5em;
font:.8em arial, sans-serif;
padding:0 1em .5em .5em;
margin-top:-.1em;
left:-9999px;
z-index:200;
-moz-border-radius:0 0 .5em .5em;
-webkit-border-radius:0 0 .5em .5em;
border-radius:0 0 .5em .5em;
-moz-box-shadow:    0 3px 2px 1px #ccc;
-webkit-box-shadow: 0 3px 2px 1px #ccc;
box-shadow:         0 3px 2px 1px #ccc;
}  

.topnav li li {

}

.topnav li li h1 {
font:bold 1.2em arial, sans-serif;
white-space:nowrap;
margin:.5em 0 .5em 0;
}

.topnav li li h2 {
font:1em arial, sans-serif;
white-space:nowrap;
}

.topnav li li a {
white-space:nowrap;
display:block;
}

.topnav li:hover ol {
left:0;
}

.topnav li:hover a {
color:#99CCCC;
}

.topnav li:hover ol a {
color:#0071BC;
}

.topnav li:hover ol a:hover {
color:#99CCCC;
}

.topnav li li.column1 { 
margin-left: 0em;
width:6.8em;
float:left;
line-height:1.5em;
}

.topnav li li.column2 { 
/*margin-left:10em;*/
width:4em;
float:left;
line-height:1.5em;
}

.topnav li li.reset {
margin-top:-10.8em;
}

和HTML 

<div class="topnav">
<ol>
<li><a href="index.html" class="vertical-line">Home</a></li> 
<li><a href="#" class="vertical-line">Get Quote</a>
  <ol>
    <li class="column1"><h1>Select phone:</h1></li>
    <div style="width:130px;height:auto;float:left">
    <li class="column1"><h2>CDMA</h2></li>
    <li class="column1"><a href="cdma3gs8gb">3GS 8GB</a></li>
    <li class="column1"><a href="cdma3gs16gb">3GS 16GB</a></li>
    <li class="column1"><a href="cdma4-8gb">4 8GB</a></li>
    <li class="column1"><a href="cdma4-16gb">4 16GB</a></li>
    <li class="column1"><a href="cdma4s16gb">4S 16GB</a></li>
    <li class="column1"><a href="cdma4s32gb">4S 32GB</a></li>
    </div>
    <div style="width:130px;height:auto;float:left">
    <li class="column2"><h2>AT&amp;T GSM</h2></li>
    <li class="column2"><a href="att3gs8gb">3GS 8GB</a></li>
    <li class="column2"><a href="att3gs16gb">3GS 16GB</a></li>
    <li class="column2"><a href="att4-8gb">4 8GB</a></li>
    <li class="column2"><a href="att4-16gb">4 16GB</a></li>
    <li class="column2"><a href="att4s16gb">4S 16GB</a></li>
    <li class="column2"><a href="att4s32gb">4S 32GB</a></li>
    </div>
</ol>
</li>
<li><a href="about.html">About</a></li>
</ol>
</div>

我在这里做的是，将column1放在一个分区中，将第二列放在另一个分区上。希望这能解决你的问题。谢谢。

相关问题
最新问题