Question

首先道歉，正如我之前看过的那样问题，但我仍然没有更聪明，所以要自己去问问题。我是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正在发生，但我是一个完全的初学者，所以我很无能为力。希望有人能看到我出错的地方。

由于

利

Answer 1

以下是您可以使用的内容，如果javascript / 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();
    });

    });

<强> DEMO

转换为下拉菜单

1 个答案: