1

CSSでナビゲーションを使用しているので、メインナビゲーションにカーソルを合わせると<ul>、親内が表示され<li>ます。十分に単純です。IEを除くすべてのブラウザで動作します。そして、その理由がわかりません。

CSSとHTMLは次のとおりです。

HTML：

<ul>
    <a href="#" class="nav"><li id="first">Home</li></a>
    <a href="#" class="nav"><li id="second">About
        <ul>                    <a href="#1"><li>Who Am I?</li></a>
            <a href="#2"><li>My Mission</li></a>
            <a href="#3"><li>Portfolio</li></a>
        </ul>
    </li></a>
    <a href="#" class="nav"><li id="third">Toy Box
        <ul>
            <a href="#"><li>Projects</li></a>
            <a href="#"><li>Toys</li></a>
        </ul>
    </li></a>
    <a href="#" class="nav"><li id="fourth">Contact</li></a>
    <a <?php if(isset($_SESSION['id'])){ echo "href='editProfile.php'"; }else{ echo "href='login.php'"; } ?> class="nav"><li id="fifth">Account
        <?php
        if(!isset($_SESSION['id'])){
        ?>
        <ul>
            <a href="login.php"><li>Log-In</li></a>
            <a href="register.php"><li>Register</li></a>
        </ul>
        <?php
        }else{
        ?>
        <ul>
            <a href="editProfile.php"><li>Edit Profile</li></a>
            <a href="logout.php"><li>Log-Out</li></a>
        </ul>
        <?php
        }
        ?>
    </li></a>
    <div class="clear"></div>
</ul>

CSS :(少ない形式で）

ul{
        list-style-type: none;

        li{
            position: relative;
            z-index: 2;
            float: left;
            width: 20%;
            height: 100%;
            margin: 0;
            padding: 0;

            font-size: 20px;
            color: #FFF;
            line-height: 35px;
            text-align: center;
            background-color: fade(#FFF, 15%);
            .transition-duration(.5s);

            ul{
                position: absolute;
                width: 100%;
                left: -9999px;
                .transition-duration(.3s);

                li{
                    display: block;
                    width: 100%;
                    height: 35px;
                    line-height: 35px;
                    background-color: fade(#FFF, 40%);
                }
            }

            &#first:hover{
                background-color: #4200AA;
            }
            &#second:hover{
                background-color: #003BB1;
                ul{
                    left: auto;
                    background-color: #003BB1;
                    .drop-shadow(0px, 2px, 4px, 3px, #111, 30%);
                    li{
                        &:hover{
                            background-color: lighten(#003BB1, 10%);
                        }
                    }
                }
            }
            &#third:hover{
                background-color: #00BC48;
                ul{
                    left: auto;
                    background-color: #00BC48;
                    .drop-shadow(0px, 2px, 4px, 1px, #111, 30%);
                    li{
                        &:hover{
                            background-color: lighten(#00BC48, 5%);
                        }
                    }
                }
            }
            &#fourth:hover{
                background-color: @yellow;
                ul{
                    left: auto;
                    background-color: @yellow;
                    .drop-shadow(0px, 2px, 4px, 1px, #111, 30%);
                    li{
                        &:hover{
                            background-color: lighten(@yellow, 10%);
                        }
                    }
                }
            }
            &#fifth:hover{
                background-color: #E82B15;
                ul{
                    left: auto;
                    background-color: #E82B15;
                    .drop-shadow(0px, 2px, 4px, 1px, #111, 30%);
                    li{
                        &:hover{
                            background-color: lighten(#E82B15, 10%);
                        }
                    }
                }
            }
        }
    }
4

2 に答える 2

1

変化する

<a href="#"><li></li></a>

に

<li><a href="#"></a></li>

そして、と希望のサイズを設定aします。display: block;

于 2013-03-24T20:32:03.070 に答える
0

このHTMLを同じCSSで使用する

<ul>
<a href="#" class="nav"><li id="first">Home</li></a>
<a href="#" class="nav"><li id="second">About
    <ul>                    <a href="#1"><li>Who Am I?</li></a>
        <a href="#2"><li>My Mission</li></a>
        <a href="#3"><li>Portfolio</li></a>
    </ul>
</li></a>
<a href="#" class="nav"><li id="third">Toy Box
    <ul>
        <a href="#"><li>Projects</li></a>
        <a href="#"><li>Toys</li></a>
    </ul>
</li></a>
<a href="#" class="nav" ><li id="fourth">Contact</li></a>
<a <?php if(isset($_SESSION['id'])){ echo "href='editProfile.php'"; }else{ echo "href='login.php'"; } ?> <a href="#" class="nav"><li id="fifth">Account</li></a>
    <?php
    if(!isset($_SESSION['id'])){
    ?>
    <ul>
        <a href="login.php"><li>Log-In</li></a>
        <a href="register.php"><li>Register</li></a>
    </ul>
    <?php
    }else{
    ?>
    <ul>
        <a href="editProfile.php"><li>Edit Profile</li></a>
        <a href="logout.php"><li>Log-Out</li></a>
    </ul>
    <?php
    }
    ?>
</li></a>
<div class="clear"></div>

于 2013-03-24T20:15:35.973 に答える