1

首先道歉，因为我之前看到过这个问题，但我仍然没有更聪明，所以不得不自己问。我对 html5 和 css3 很陌生，到目前为止，我已经成功了，直到现在。

我想将导航菜单中的一个选项转换为下拉菜单，我已经尝试过多次使用此处和其他站点的信息，但我仍然遇到问题。

这是我的导航菜单的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 路线走下去。

在此先感谢您的帮助，我们将不胜感激。

编辑 21/03/2013...

我试图实现下面给我的代码，这个小提琴显示了我已经走了多远，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 回答