1

最初に謝罪します。これまでにこの質問を聞いたことがありますが、それでも私は賢明ではないので、自分で質問する必要があります。私はhtml5とcss3に非常に慣れていないので、これまで何とかやって来ました。

ナビゲーションメニューのオプションの1つをドロップダウンメニューに変換したいのですが、ここや他のサイトの情報を何度も使用してみましたが、まだ問題があります。

これがナビゲーションメニューのCSSです。

    /* Site Nav */

    #site-nav
{
    position: absolute;
    top: 0;
    right: 50px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: right;
}

    #site-nav ul
    {
        list-style: none;
        overflow: hidden;
    }

        #site-nav ul li
        {
            display: block;
            float: left;
            text-decoration: none;
            font-size: 1.2em;
            height: 90px;
            line-height: 110px;
            margin: 0 0 0 1.75em;
        }

            #site-nav ul li a
            {
                color: #000;
                text-decoration: none;
                outline: 0;
            }

            #site-nav ul li a:hover
            {
                color: #fff;
            }

        #site-nav ul li.current_page_item
        {
            background: url('images/nav-arrow.png') center 77px no-repeat;
        }

            #site-nav ul li.current_page_item a
            {
                color: #662d91;
            }

これが私のメニューのhtmlです...

    <ul>
                                <li><a href="index.html">Homepage</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="products.html">Products</a></li>
                                <li><a href="bullion.html">Bullion</a></li>
                                <li class="current_page_item"><a href="#.html">Contact Us</a></li>

                            </ul>

これがHTML5とCSS3だけで実行できるのであれば、それは素晴らしいことですが、必要に応じてJavaScriptルートをたどることができてうれしいです。

よろしくお願いします。よろしくお願いします。

2013年3月21日編集...

私は以下に与えられたコードを実装しようとしました、そしてこのフィドルは私がどこまで到達したかを示しています、http://jsfiddle.net/2rgSP/1/ 2つの問題で、最初に、リンクはウェブサイトの端から押し出されます、2ドロップダウンメニューはメインラッパーの後ろにあります。明らかにいくつかの矛盾するCSSが進行中ですが、私はこれについて完全な初心者なので、私は恐れています。うまくいけば、誰かが私がどこで間違っているのかを見ることができます。

ありがとう

リー

4

1 に答える 1

1

以下は、javsscript/jquery がオプションである場合に使用できるものです。

<ul id="cssdropdown">
    <li class="headLink">Home
        <ul>
            <li><a href="#">Home1</a></li>
            <li><a href="#">Home4</a></li>
            <li><a href="#">Home2</a></li>
            <li><a href="#">Home3</a></li>
            <li><a href="#">Home5</a></li>
        </ul>
    </li>
    <li class="headLink">About
        <ul>
            <li><a href="#">About1</a></li>
            <li><a href="#">About2</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">About3</a></li>
            <li><a href="#">About5</a></li>
        </ul>
    </li>

    <li class="headLink">Contact
        <ul>
            <li><a href="#">Contact1</a></li>
            <li><a href="#">Contact2</a></li>
            <li><a href="#">Contact3</a></li>
            <li><a href="#">Contact4</a></li>
            <li><a href="#">Contact5</a></li>
        </ul>
    </li>
    <li class="headLink">Links
        <ul>
            <li><a href="#">Links1</a></li>
            <li><a href="#">Links2</a></li>
            <li><a href="#">Links3</a></li>
            <li><a href="#">Links4</a></li>
            <li><a href="#">Links5</a></li>
        </ul>
    </li>
</ul>

CSS

body{
    padding:0px;
    margin:0px;
}
ul li{
    list-style-type:none;
}
#cssdropdown{
    padding:0px;
    margin:0px;
}
a{
    text-decoration:none;
    padding:0px;
    margin:0px;}
.headLink{ 
    display: inline-block; 
    padding:10px;
    margin:10px;
    text-align:right;
    background-color:#999999;
    cursor:pointer;
}
.headLink ul{
    display:none;
    position: absolute;
    margin:10px 0 0 -13px;
    padding:0 10px;
    text-align:left;
    background-color:#CCC;
    cursor:pointer;
}

JS:

$(function() {
    $(".headLink").hover(function() {
        $('ul',this).slideToggle();
    });

    });

デモ

于 2013-03-20T09:10:17.793 に答える