0

私は会社の Web サイトに取り組んでおり、HTML と CSS は初めてです。ナビゲーション バーのドロップダウン メニューを作成しようとしていますが、要点はわかりましたが、助けが必要です。ドロップダウンが適切に並んでおらず、テキストが大きすぎて、境界線がリスト全体にかかっています。

CSS:

.menu{
    padding:0;
    margin:25px 0 0 0;
}
.menu, .menu li{
    list-style: none;
    display: block;
    float:right;
    padding:12px;
    border-right: 1px solid #d8d8d8;
}
.menu li{
    float:left;
    display: block;
    width: 100px;
}
.menu ul{
    opacity: 0;
}
.menu ul li{
    background-color: white;
}
.menu li:hover > ul{
    opacity: 1;
}
.menu li.last-menu-item{
    border: none;
    padding-right:0;
}
.menu a{
    color:#132d3c;
    font-size:15px;
    font-family: 'sansationbold';
    text-transform: uppercase;
    text-decoration: none;
    font-weight:lighter;
}
.current-menu-item a{
    color:#f15c22;
}
.menu a:hover{
    color:#f15c22;
}

HTML:

<ul class="menu alignright">
            <li class="current-menu-item"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a>
                <ul>
                    <li><a href="about.html">Who We Ar</a></li>
                    <li><a href="about.html">Values</a></li>
                    <li><a href="about.html">Owners Message</a></li>
                    <li><a href="#">Infotek Blog</a></li>
                    <li><a href="stories.html">Success Stories</a></li>
                    <li><a href="partners.html">Partners</a></li>
                </ul>
            </li>
            <li><a href="products.html">Products &amp; Solutions</a>
                <ul>
                    <li><a href="p&s.html">Security Solutions</a></li>
                    <li><a href="p&s.html">Data Solutions</a></li>
                    <li><a href="p&s.html">Communication Solutions</a></li>
                    <li><a href="p&s.html">Connectivity Solutions</a></li>
                    <li><a href="p&s.html">Infrastructure Solutions</a></li>
                    <li><a href="resources.html">Resources</a></li>
                </ul>
            </li>
            <li class="last-menu-item"><a href="contact.html">Contact</a></li>
        </ul>

少し手伝ってもらえますか？

http://jsfiddle.net/pQhpu/191/

4

5 に答える 5

1

こんにちは、あなたはいくつかの間違いを犯しています。

  • サブメニューを非表示にするために不透明度を使用しないでください。プロパティで設定してくださいdisplay:none

  • position:relativeあなたのliとそれらの中のulで設定してくださいposition:absolute

このデモを見て、質問をしてくださいhttp://jsfiddle.net/pQhpu/214/

編集

彼の親に関連してサブメニューを中央に配置するという要求を解決するには、Jquery を使用できます。この関数を作成しました: ここでデモを確認してくださいhttp://jsfiddle.net/pQhpu/264/

$(document).ready (function () {

$('.menu li').mouseenter(function (){
     var $this = $(this),
         $sub =$(this).children('ul'),
         pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10),
         move=($this.width()+pad-$sub.width())/2;
    $sub.css ('left',move+'px');   
});

})

ここで変更する必要があるのは、サブメニューを表示する li の名前ルートだけです。私の場合は'.menu li'です。この関数は、サブメニューとその親の幅を取り、それを中央に配置する操作を行います。

于 2013-10-24T22:27:35.673 に答える
0

配置の問題を修正するには、次を追加します。

.menu, .menu li
    {
    padding: 12px 0 12px 0;
    }

これはfirebugに表示されますが、上記のコードには表示されません

.menu, .menu li
    {
    padding: 12px;
    }
于 2013-10-24T22:19:26.333 に答える
0

a境界線については、実際の ではなく の上に置きますli。そして、パディングaを同様に配置して、境界線を右に押します。フローティング ボーダーを右側から外したくない場合は、通常、最後の項目に「.last」などのクラスを追加する必要があります。すべてのテキストを 1 行に収めるために幅を大きくするか、全体のサイズを小さくする必要があります。これで始められるはずです。

于 2013-10-24T22:16:19.720 に答える