Question

目前在Wordpress中工作。我有一个菜单与Wordpress内置的管理栏冲突。为了解决这个问题，我的菜单需要有一个单独的标识。我试过给css提供各种ID和类，但是我无法让它工作。我可以尝试任何想法吗？

<style>
    ul {
        text-align: left;
        display: inline;
        margin: 0;
        padding: 15px 4px 17px 0;
        list-style: none;
    }

    ul li {
        font: bold 12px/18px sans-serif;
        display: inline-block;
        margin-right: -4px;
        position: relative;
        padding: 7px 20px 10px 20px;
        background: #14325c;
        color: #fff;
        cursor: pointer;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }

    ul li:hover {
        text-decoration: underline;
        background: #555;
        color: #fff;
    }

    ul li ul {  
        padding: 0;
        position: absolute;
        top: 35px;
        left: 0;
        width: 150px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
    }

    ul li ul li { 
        background: #555; 
        display: block; 
        color: #fff;
        text-shadow: 0 -1px 0 #000;
    }

    ul li ul li:hover { background: #666; }

    ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }
</style>

<ul>
    <li>ADMISSIONS
        <ul>
            <li>Apply Now</li>
            <li>Programs of Study</li>
            <li>Registrar</li>
            <li>FYE Orientation</li>
        </ul>
    </li>
    <li>RESOURCES
        <ul>
            <li>Academics</li>
            <li>Student Services</li>
            <li>Student Life</li>
            <li>Career Services</li>
            <li>Business Office</li>
        </ul>
    </li>
    <li>FINANCIAL AID
        <ul>
            <li>My FAO</li>
            <li>Types of Financial Aid</li>
            <li>Scholarships</li>
            <li>Net Price Calculator</li>
            <li>Forms</li>
        </ul>
    </li>
    <li>CONTACT US
        <ul>
            <li>Schedule a Visit</li>
            <li>Request Information</li>
            <li>Locations</li>
            <li>Employee Directory</li>
        </ul>
    </li>
</ul>

Answer 1

想出来。

我刚刚在html周围添加了一个nav元素，其ID为nav-menu。然后，我将#nav-menu添加到每个css条目的开头。

现在每个人都在工作，谢谢@Terry！

给一个菜单一个ID

1 个答案: