このサイトの同様のスレッドを読み、役立つヒントをいくつか見つけましたが、CSS ドロップダウン メニューで列を正しく機能させるのにまだ問題があります。テスト サイトはこちら: http://iphonebuy-host1.gaiahost.net/index.html
一部、この記事 ( http://alistapart.com/article/multicolumnlists ) の方法 4 のアイデアを使用していますが、これは XHTML 用であり、HTML を使用しています。
主なことは、2 番目の列のリスト項目がヘッダーの下部に固定されていないことです。参照記事によると、.reset に負のマージンを設定すると、2 番目の列全体が必要な場所に表示されるはずですが、ヘッダー (.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&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>