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

理解した。

HTMLを囲むnavIDを持つ要素を追加しました。nav-menu次に、#nav-menu各cssエントリの先頭に追加しました。

これですべてが機能します。@Terryに感謝します。

于 2013-03-25T20:28:15.740 に答える