0

リスト要素でホバーするとトリガーされるCSS/HTMLを使用してメニューバーを作成しようとしています。リストを 2 列に並べようとすると問題が発生します。

サンプルコードは次のとおりです: http://jsfiddle.net/Km922/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style media="all">
        .navigation ul
        {
            margin: 0px;
            padding: 0px;
            list-style: none;
            left: 300px;
            position: relative;
            top: 200px;
        }
        .navigation ul li ul .second
        {
            float: right;
            width: 200px;
            position: relative;
            overflow: hidden;
        }
        .navigation li
        {
            float: left;
            height: 30px;
            margin-left: 15px;
            margin-right: 15px;
            position: relative;
            top: 30px; /*clear:left;*/
        }
        .navigation li a
        {
            text-decoration: none;
        }
        .navigation li a:hover
        {
            text-decoration: underline;
        }
        .navigation li ul
        {
            margin: 0px;
            padding: 0px;
            position: absolute;
            left: -9999px;
            height: 30px;
            top: 30px; /*display:inline-block;*/
        }
        .navigation li:hover ul
        {
            left: 0;
            width: 160px;
            visibility: visible;
        }
        .header-container
        {
            background: url(Images/nav-bg4.png) repeat-x scroll 0 0 transparent;
            height: 136px;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 901;
        }
        #apDiv1
        {
            position: absolute;
            width: 200px;
            height: 115px;
            z-index: 902;
            top: 29px;
        }
        .navigation ul li ul .first
        {
            float: left;
            width: 200px;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>
<body background="Images/global-splash-map.jpg">
    <header class="header-container">
  <div id="apDiv1"><img src="Images/levis-logo.png" /></div>
</header>
    <div class="navigation">
        <ul>
            <li><a href="#">menu1</a>
                <ul>
                    <li class="second">Canada</li>
                    <li class="first">United States</li>
                    <li class="second">Mexico</li>
                </ul>
            </li>
            <li><a href="#">menu2</a>
                <ul>
                    <li class="second">Argentina</li>
                    <li class="second">Brazil</li>
                    <li class="second">Bolivia</li>
                    <li class="second">Chile</li>
                    <li class="second">Colombia</li>
                    <li class="second">Ecuador</li>
                    <li class="first">Panama</li>
                    <li class="first">Paraguay</li>
                    <li class="first">Peru</li>
                    <li class="first">Uruguay</li>
                    <li class="first">Venezuela</li>
                </ul>
            </li>
            <li><a href="#">menu3</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
            <li><a href="#">menu3</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
            <li><a href="#">menu4</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

menu1 にカーソルを合わせると完全に表示されますが、 menu2 にカーソルを合わせると、各行に表示されるはずのリスト要素が表示され、互いに重なり合っていることがわかります。誰でもこの問題を解決するのを手伝ってくれますか?

4

3 に答える 3

1

いくつかの問題があります。まず、フロートと絶対測位には互換性がありません。

.navigation ul li ul .first {
    float: left;
    position: absolute;
}

次に、このようなリストアイテムをスタックして、2つの列に分割することはできません。それはフロートがどのように機能するかではありません。

<ul>
  <li class="second">Argentina</li>
  <li class="second">Brazil</li>
  <li class="second">Bolivia</li>
  <li class="second">Chile</li>
  <li class="second">Colombia</li>
  <li class="second">Ecuador</li>
  <li class="first">Panama</li>
  <li class="first">Paraguay</li>
  <li class="first">Peru</li>
  <li class="first">Uruguay</li>
  <li class="first">Venezuela</li>
</ul>

特定のHTMLを含まない複数列のリストは課題です。これがあなたを始めるかもしれない記事です：http：//alistapart.com/article/multicolumnlists

于 2013-02-20T21:47:47.690 に答える
0

すでに述べたように、同じ要素で float と絶対配置を一緒に使用することはできません。どちらも必要ないので、大丈夫です。完璧な列を作成する秘訣は、CSS 列モジュールを使用することです。

ここで、CSS でかなりの量のクリーンアップを行いました。

http://jsfiddle.net/uPzxb/4/ (プレフィックスは含まれていません)

.navigation ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    left: 30px;
    position: relative;
    top: 20px;
}
.navigation > ul > li {
    float: left;
    height: 30px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
}
.navigation li a {
   text-decoration: none;
}
.navigation li a:hover {
   text-decoration: underline;
}
.navigation li ul {
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 30px;
    display: none;
}
.navigation li:hover ul {
    left: 0;
    width: 160px;
    display: block;
    columns: 2; /* this here is the key */
}
.header-container {
    background: url(Images/nav-bg4.png) repeat-x scroll 0 0 transparent;
    height: 136px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 901;
}
#apDiv1 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 902;
    top: 29px;
}

http://caniuse.com/#feat=multicolumn

于 2013-02-20T23:56:12.947 に答える