1

我已经阅读了该站点上的一些类似主题，并找到了一些有用的提示，但我仍然难以让列在我的 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>
4

2 回答 2

2

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

在这种情况下，最好要么与方法保持完全一致，要么朝着完全不同的方向前进，根本不去模仿。夹在中间——不一致地遵循方法——可能会造成最大的麻烦。

将 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 和可访问性。

于 2013-05-10T01:19:16.330 回答
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 放在一个分区中，将 column 2 放在另一个分区中。希望这能解决您的问题。谢谢你。

于 2013-05-09T22:37:18.470 回答