0

私の問題を部分的に解決したので、この投稿を編集しました。ただし、現在、新しい問題に直面しており、スパムと見なされる場合に備えて新しい質問を作成したくありません。現在、件名の追加、件名の削除、件名の削除、#menu li li a で text-align center に指定しているにもかかわらず、手動クロールは集中化されていません。サブメニューのエグゼクティブサマリーも切れています。サブメニューを展開してすべてのテキストを一元化する方法を教えてください。
ありがとうございました！

これが私のコードです（私はjsfiddleアカウントを持っておらず、待機リストに載っているため、本当に申し訳ありません）：

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="#">Add Subject</a></li>
            <li><a href="#">Delete Subject</a></li>
            <li><a href="#"> Edit Subject</a></li> 
            <li><a href="#" >Manual Crawl</a></li>
            <li><a href="#" >Executive Summary</a></li>
        </ul>
    </li>
</ul>

</p>

CSS

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

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

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

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

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

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

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

#menu li li a:hover{
   background: rgba(255,255,255,0.5);
}

</p>

4

5 に答える 5

1

position: relativeとの組み合わせを使用しposition: absolute;て問題を修正します。JsFiddlehttp :
//jsfiddle.net/VDmJj/1/を参照してください。

于 2012-09-05T18:18:45.290 に答える
1

追加 ：

1）位置：相対; to #menu ul li
2）top：30px; 左：10px; to #menu ul li：hover ul、＃menu ul li.hover ul
3）width：180px; to #menu ul li ul（これはサブメニュー項目によって異なります）

これにより、最小限の変更で目的の結果が得られます。cssは、実行しているタスクにとって少し複雑ですが、次の方法で非常に簡単に実行できます。

http://jsfiddle.net/tPBmV/

これがjqueryに基づいて見つけた別のフィドルです。

http://jsfiddle.net/davidThomas/YfjzP/

それは私が作ったものではありませんが、jqueryを実装するのに十分快適であれば便利です。

于 2012-09-05T18:28:26.920 に答える
1

これで実行できるはずです：

#menu ul, #menu li {
    list-style:none;
    margin:0;
    padding:0;   
}

#menu ul li {
   float:left;
   position:relative;
}
#menu ul li a {
   display:block;
   height:35px;
   margin-right:5px;
}
#menu ul li ul {
   display: none;
   background-color: rgba(0,0,0,0.5);
}
#menu ul li:hover ul, #menu ul li.hover ul {
   display: block;
   position: absolute;
   top:40px;
   left:0   
   margin: 0;
   padding: 0;
   z-index:1;
}

#menu ul li ul li a {
   display:block;
   height:35px;
   width:130px
   background-color: rgba(0,0,0,0.5);
}
#menu ul li ul li a:hover{
   background:rgba(255,255,255,0.5);
}

あなたが逃したことの1つposition:relativeは、サブメニューのPARENTを設定することです. これは、子アイテムの原点をリセットするため重要です。また、物事を整理し、冗長な宣言をいくつか削除しました。テキストのスタイルを少し変更する必要がある場合があります。

1 つの重要なポイント: メニューのすべてのスタイル (配置以外) は、LI ではなく A タグに適用する必要があります。これにはフォントが含まれます。背景色など

参照: http://preview.moveable.com/jm/ilovelists/

于 2012-09-05T18:13:18.667 に答える
0

このようにサブメニューにmargin-topを追加します 

#menu ul li:hover ul, #menu ul li.hover ul{
margin-top:40px
}
于 2012-09-05T18:20:32.213 に答える
0

フィドルをチェックしてください。多くの CSS 変更を行いました: http://jsfiddle.net/wAGGA/

CSS:

 #menu {
   width:1200px;
height:35px;
padding:0px;
clear:both;
background-color:#000;
 }
 #menu ul{
list-style:none;padding:0 0 0 400px;margin: auto;display:block;
}

#menu ul li {
   list-style:none;display:inline;float:left;width:auto;height:35px;padding:0px;line-height:35px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
#menu ul li a{
   display:block;height:35px; width: auto;float:left;text-decoration:none;padding:0 0 0 25px; margin:0px 3px 0px 3px;color:#fff;text-align:center;}
#menu ul li ul {
   display: none;
   width: 200px; /* Width to help Opera out */
   background-color: rgba(0,0,0,0.5);}
#menu ul li:hover ul, #menu ul li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0;
   z-index:1;
   top: auto;
    margin-top: 35px;
    right: 0;
}
#menu ul li ul li {display: block; float: none; width: 100%}   
#menu ul li ul li a{
   display:block;
    height:35px; 
    text-decoration:none;
    padding:0 0 0 25px; 
    margin:0px 3px 0px 3px;
    color:#fff;
    text-align:center;
}
   #menu ul li ul li a:hover{
   background:rgba(255,255,255,0.5);
   }​
于 2012-09-05T18:13:22.213 に答える