0

私は素晴らしく機能する素敵な CSS3 メニューを持っていますが、1140px Grid Systemも組み込んでいます。1140px システムには、次のようなクラスがあります。

.row {
 width: 100%;
 max-width: 1140px;
 min-width: 755px;
 margin: 0 auto;
 overflow: hidden;
}

これoverflow: hidden;により、メニューのメニュー ドロップダウンが正しく機能しなくなります。メニューの HTML は次のとおりです。

<div class="row">
<div class="twelvecol logo">
<h1><a href="/">Logo</a></h1>

   <div id="navigation">
    <ul>
    <li><a href="#">Home</a></li>

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

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

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

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

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

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

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

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

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

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

             <li><a href="#">October</a></li>
        </ul>
    </li>
  <!-- MORE CODE -->

オーバーフロー プロパティを追加してオーバーライドしようとしましたoverflow: visible !important;が、ページが完全に壊れてしまいました。

1140px Grid System を削除せずに問題を解決し、メニューを適切に表示するソリューションを手伝ってくれる人はいますか?

これが私が作成したjsFiddleです。

注: jQuery が機能する場合は、jQuery を使用するソリューションを使用してもかまいません。

4

4 に答える 4

2

CSSに以下を追加すると問題が解決します

#navigation ul
{
    position: absolute;
left: 500px;
min-width: 300px;
}

ワーキングデモ

于 2012-10-05T06:05:06.793 に答える
1 
#navigation ul{
  position:absolute;
 right:0;
}
#navigation li ul{
 width:110px;
 }
于 2012-10-05T06:25:17.767 に答える
0

また、Nav div 全体を含む div 内から削除して、ドキュメント フローで最初に来るようにすることもできます....上記のように

于 2012-10-05T06:17:36.683 に答える
0

コンテナに新しいクラスを追加してみてください:

<div class="row notoverflow">

あなたのCSSで：

.row.notoverflow{overflow:auto}

そしてあなたのコンテナの最後に

<div class="row notoverflow">. . .
    <div style="clear:both"></div>
</div>

プロパティがなければ、overflow:hiddenコンテナの高さはコンテンツとともに増加しません...それを行う別の方法は、フロートをクリアすることです。

于 2012-10-05T05:56:53.067 に答える