Question

我在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%);
                        }
                    }
                }
            }
        }
    }

Answer 1

更改

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

要

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

并将a设置为display: block;和所需的尺寸。

Answer 2

将此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>

IE中的CSS下载

2 个答案: