2

メニューバーがあります。メニューバーは水平です。次に、ホバーするとサブメニューが垂直方向に拡張されます。このサブメニューの項目には、サブジェクトの管理、手動クロール、クロール間隔、およびアーカイブリストが含まれます。マウスを[サブジェクトの管理]に合わせると、右側に別のドロップダウンリストが表示され、サブサブメニューが作成されます。ただし、このサブサブメニューを右側に表示することはできます。そのオーバーラップ私のサブメニュー。私はCSSに本当に慣れていないので、これについては間違いなく助けが必要です。#menu ul li ul li ul、#menu ul li ul li:hover ul、#menu ul li ul li:hover ul li、#menu ul li ul li ul li a:hoverを編集していないような気がします。ありがとうございました。

HTML

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Executive Summary</a></li>
        <li><a href="#" > Visual Analytics</a></li> 
        <li><a href="#" >Settings</a>
            <ul>                                      
                <li><a href="#" >Manage Subject</a></li>
                    <ul>
                        <li><a href="#">Add Subject</a></li>
                        <li><a href="#">Edit Subject</a></li>
                        <li><a href="#">Delete Subject</a></li>
                        <li><a href="#">Export Subject</a></li>
                    </ul>
                <li><a href="#">Manual Crawl</a></li>
                <li><a href="#">Crawl Interval</a></li> 
                <li><a href="#">Archive List</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

 #menu {
    position: relative;
    float: left;
    width: 1200px;
    height: 35px;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px;
    padding: 0;    
    background-color:#000;
    text-align: center;
    z-index:1;
}

#menu ul {
    position: relative;
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#menu ul li {
    position: relative;
    float: left;
    height: 100%;
    padding: 0;
    line-height: 35px; 
}

#menu ul li a {
    position: relative;
    height: 100%; 
    width: auto;
    float: left;
    text-decoration: none;
     padding: 0px 10px 0px 10px;   
    margin: 0 3px;
    color: #fff;
    text-align: center;
}

#menu ul li ul {
   display: none;
   width: 150px; /* Width to help Opera out */
   background-color: rgba(0,0,0,0.5);
}

#menu ul li:hover ul {
    display:block;
   position: absolute;
   top: 35px;
   left: 0;
   margin: 0;
   padding: 0;
   z-index: 1;
   width:150px; 
}

#menu li li a{
    height: 35px; 
    width: 150px;
    float: left;
    text-decoration: none;
    padding: 0px; 
    margin: 0 0px;
    color: #fff;
    text-align: center;
}

#menu ul li ul li a:hover{
   background: rgba(255,255,255,0.5);
   width:150px;
   float:left;
}
#menu ul li ul li ul{ display:none; position:absolute;background-color:rgba(28,28,240,0.5);}
#menu ul li ul li:hover ul { display:block; position:absolute; top:0px;background-color:#fff;}
#menu ul li ul li:hover ul li { list-style:none; float:none; margin-left:1px; padding:0px; position:relative;background-color:#fff;}
#menu ul li ul li ul li a:hover{
   background-color: rgba(28,28,240,0.5);
   width:150px;
   float:left;
}​
4

4 に答える 4

4

最初の質問

正しく表示されるようにするには、サブメニューulを上位レベルのメニュー項目でラップする必要があります。liこれは、html構造の簡単な例です。

<ul id="menu">
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a>
        <ul>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a>
                <ul>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                </ul>
            </li>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a></li>
        </ul>
    </li>
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a></li>
</ul>

2番目の質問

第2レベルのサブメニューを右に移動するための秘訣は、それらにプロパティを与えることでしたleft:150px

#menu ul ul{
    left:150px;               
}

あなたのStylecheetの改善

ちなみに、最初にcssで最初に非表示にしたボックスのすべてのプロパティを最初に指定できることに注意してください。次に、:hoverセレクターdisplay:blockは要素を表示するためのルールを設定するだけで済みます。すでに設定されている背景色で非表示になっている場合、表示されdisplay:noneません。

しかし、あなたがあなたのスタイルチートを改善することができる他のポイントもあります。たとえば、すべてのサブメニューはメニュー内のすべてのリストであるため、セレクターを使用してすべてのサブメニューのプロパティを設定でき#menu ulます(メニューのulにidがある場合)。menu最初のレベルのサブメニューにのみ何かを設定したい場合は、#menu > li > ul直接の子にのみアプローチするため、使用できます。第2レベルのサブメニューには、を使用します#menu ul ul

これらのテクニックを使用すると、スタイルチートはより抽象的になります。私のソリューションは、サブメニューのレベル数に制限はありません。たとえば、htmlコードを追加するだけで第3レベルのサブメニューを実装できます。stylecheetはそれを処理できます。

これがあなたの例の実用的なフィドルです:http://jsfiddle.net/m8Bcb/4/

そこで、改善されたソースコード(htmlとcssの両方)と動作するライブデモを見ることができます。そして、この編集で、スタイルチートもあなたの理解のためにコメントされます。それがあなたの助けになり、あなたがcssを学び続けることを願っています!

于 2012-09-06T19:20:16.973 に答える
1

サブメニューは、親メニューのリスト項目内にある必要があります。

HTML を次のように変更します。

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Executive Summary</a></li>
    <li><a href="#" > Visual Analytics</a></li> 
    <li><a href="#" >Settings</a>
        <ul>                                      
            <li><a href="#" >Manage Subject</a>
                <ul>
                    <li><a href="#">Add Subject</a></li>
                    <li><a href="#">Edit Subject</a></li>
                    <li><a href="#">Delete Subject</a></li>
                    <li><a href="#">Export Subject</a></li>
                </ul>
            </li>
            <li><a href="#">Manual Crawl</a></li>
            <li><a href="#">Crawl Interval</a></li> 
            <li><a href="#">Archive List</a></li>
        </ul>
    </li>
</ul>

サブメニュー</li>の を の後に移動しただけであることに注意してください。</ul>

于 2012-09-06T19:21:44.430 に答える
1

このようにcssを変更します

#menu ul li:hover > ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
width:150px; 
}

li にカーソルを合わせると、ul 全体が表示されるため、直接の兄弟を選択する必要があります。

そして追加

#menu ul li ul li ul {
display: none;
}
于 2012-09-06T19:29:07.763 に答える
0

ダニジャーのjsフィドルソリューションに追加するだけです。

すべてのサブ メニューを最初のリスト (「メイン メニュー項目」) に対して相対的に表示したい場合もありますが、より良い解決策は、親リスト項目に対して相対的にリストまたは「サブ メニュー」を表示することです。

/* ensure each submenu displays relative to it's parent list item */
#menu ul li {
  position: relative;
}

上記のスタイリング行を追加するメニューの例を次に示します: http://jsfiddle.net/codk1sgm/5/

于 2020-05-03T09:10:08.633 に答える