1

この方法を使用してドロップダウンメニューを作成しています：

http://azadcreative.com/2012/01/bulletproof-css3-dropdown-navigation-menu/

思い通りに動作します。唯一の問題は、メニュー項目 (ロゴを除く、正しく配置されている) をナビゲーション バーに垂直に配置できないことです。さまざまな方法を試しましたが、どれもうまくいかないようです。別のセレクターが干渉していると思われますが、どちらが干渉しているのかわかりません。

現在のコードの結果は次のようになります。

http://i.stack.imgur.com/fqh6W.png

セパレーターも揃えようとしています。

私のCSS

<style type="text/css">
    @import url("inc/reset.css");
    @import url("fonts/fonts.css");
    body { background-color: #fff; }
    nav {
        width: 925px;
        margin: 0 auto;
        zoom: 1;
        text-align: left;
        border: 1px solid #000;
    }
    nav:before, nav:after { display: table; content: ""; zoom: 1;   }
    nav:after { clear: both; }
        nav ul {
            float: left;
            zoom: 1;
            width: auto;
            z-index: 100;
            position: relative;
        }
        nav ul:before, nav ul:after { display: table;   content: ""; zoom: 1 }
        nav ul:after { clear: both; }
            nav ul li {
                float: left;
                padding: 0 0 10px 0;
                position: relative;
                outline: none;
                padding: 0 1px 0 0;
            }
            nav ul li.span:before { content: ''; }
            nav ul li + li:before { content: '|'; color: #a8c399; }
        nav ul a {
            padding: 15px;
            float: right;
            display: block;
            zoom: 1;
            font: .9em "jubilat-regular", "Franklin Gothic Book", "Times New Roman", serif;
            text-transform: lowercase;
        }
        nav ul a:link, nav ul a:visited { color: #353536; text-decoration: none; outline: none; }
        nav ul a:hover, nav ul a:active { color: #701271;   text-decoration: none; outline: none; }

    #menu li:hover > ul { display: block; }
    #menu li:hover > a { color: #701271; }

    nav li ul {
        display: none;
        margin: 0;
        position: absolute;
        top: 46px;
        left: 15px;
        width: 10em;
        background: #fff;
        border: 1px dashed #a8c399;
        z-index: 1000;
        zoom: 1;
    }
        nav li ul li + li:before { content: ''; }
        nav li ul li:hover { background-color: #a8c399; }
        nav li ul:before, nav li ul:after { display: table; content: ""; zoom: 1;   }
        nav li ul:after { clear: both; }
    nav li ul a { float: none; }
    nav li ul li { width: 10em; display: block; }
</style>

私のHTML：

<nav>
<ul id="menu">
    <li><a href="#">Why Miche</a></li>
    <li><span style="color:#701271;"><a href="#">Join Us</a></span>
        <ul>
            <li><a href="#">Join My Team!</a></li>
            <li><a href="#">Starter Kits</a></li>
        </ul>
    </li>
    <li><a href="#">Host a Miche Party</a>
        <ul>
            <li><a href="#">Hostess Benefits</a></li>
            <li><a href="#">Miche Party Ideas</a></li>
        </ul>
    </li>
    <li class="span"><a href="#"><img src="images/logo.png" width="295" height="67" alt="Miche" /></a></li>
    <li class="span"><span style="color:#701271;"><a href="#">Shop</a></span></li>
    <li><a href="#">About Miche</a>
        <ul>
            <li><a href="#">Media</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Giving Back</a></li>
        </ul>
    </li>
    <li><span style="color:#701271;"><a href="#">About Me</a></span></li>
</ul>
</nav>
4

1 に答える 1

1

セパレーターを揃えました（コメントにcssを追加しました）：
http://jsfiddle.net/JTKEx/

他に何を正確に変更したいですか？

于 2012-06-19T17:13:30.103 に答える