0

目前在 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>
4

1 回答 1

0

弄清楚了。

我刚刚添加了一个 id围绕我的 html的nav元素。nav-menu然后,我添加#nav-menu到每个 css 条目的开头。

现在一切正常,谢谢@Terry!

于 2013-03-25T20:28:15.740 回答