1

通常の状態: 通常状態

ホバー状態: ホバー状態

皆さん、これは些細なことかもしれませんが、この「些細さ」の源を見つけることができませんでした。画像リンクからわかるように、そこにドロップダウンメニューを作成しようとしました。悲しいことに、トリガーをドロップダウン メニューに合わせると、ドロップダウンではなく、メニューが水平に表示され、メイン メニューに統合されます。

これは私の単純化された html です (私はホーム、アバウト、およびベンチマークのみを使用します。アバウトのドロップダウン トリガー)

<div class="header">
    <div id="navbar">
         <ul id="nav" >
         <li class="rhombus"><a class="Home"        href="#"><span><p>Home</p></span></a></li>
         <li class="rhombus"><a class="About"   href="#"><span><p>About</p></span></a>
             <ul>
             <li><a class="History" href="#"><span><p>History</p></span></a></li>
             <li><a class="Board"   href="#"><span><p>Board</p></span></a></li>
             <li><a class="Vision"  href="#"><span><p>Vision &amp; Mission</p></span></a></li>
             </ul>
         </li>
        <li class="rhombus"><a class="Benchmark"                    href="#"><span><p>Benchmark &amp; Market</p></span></a></li>
         </ul>
 </div></div>

これは単純化されたCSSです

/* centering container */
.outerwrap {width:100%; height:100%; margin:0px; padding:0px; display:table; position:absolute; top:0px; left:0px;}
.innerwrap {margin:0px; padding:0px; display:table-cell; vertical-align:middle;}

/* header */
.header {height:27.82738095238095%; width:100%; position:absolute; top:0%; left:0%; z-index:100;}

/* navigation bar */
#navbar {position:relative; top:60.2%; left:5%; z-index:100;}

#nav, #nav ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside;}   

#nav a:link, #nav a:active, #nav a:visited{height:31px; display:block; text-decoration:none; background:yellow}

#nav a:hover{background:red;}

#nav li ul {position:relative; display:none;}

#nav li ul li a:link, #nav li ul li a:visited {height:31px; background:green;}

#nav li ul li a:hover {background:blue}

.History{width:50px;float:left;}
.Board{width:50px;float:left;}
.Vision{width:50px;float:left;}

li.rhombus
{
    position: relative;
    transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -o-transform: skew(-35deg);
    width:96.1%;
}

a.Home      {width:50px;float:left;}
a.About     {width:50px;float:left;}
a.Benchmark         {width:50px;float:left;}

li.rhombus span 
{
    transform: skew(35deg);
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    display:block;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;}

.test{}

<a></a>ドロップダウン メニューのプロパティの 1 つとして "float:left" を使用しているからですか? そのプロパティを削除すると、次のようになります。

削除されたプロパティ

そして、私のドロップダウンには何か奇妙なことがあります..クラス、ID、または何も付けずに、css に {CSS ブロック} が必要です。

.unusedclass{CSS}
.unusedid{CSS}
{}

これらのいずれかを指定しないと、「ドロップダウン」は移動せず、代わりにホバー状態が表示されます。(画像 2)。

ここに簡略化されたフィドルがあります: fiddle

助けてください

4

2 に答える 2

0

.Historyetcクラスに以下を追加してみてください。

clear:right;
于 2013-01-14T22:22:19.127 に答える
0

サブメニューごとにクラスを作成しないでください。 これは、あなたが望む結果を得る同様の投稿です。次に、各ブロックを傾斜、色などにスタイル設定できます。

于 2013-01-14T22:20:17.330 に答える