且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何添加下拉菜单使用CSS?

更新时间:2023-02-16 16:43:15

工作菜单:

给你快速小提琴

// HTML

<div id="menu">
<ul>
    <li><a href="index.html" accesskey="1" title="">Home</a>

    </li>
    <li><a href="services.html.html" accesskey="2" title="">Services</a>

        <ul>
            <li><a href="#">Something You do</a>

            </li>
            <li><a href="#">TODO</a>

            </li>
        </ul>
    </li>
    <li><a href="faq.html" accesskey="3" title="">FAQ</a>

    </li>
    <li class="active"><a href="about.html" accesskey="4" title="">About</a>

    </li>
    <li><a href="contact.html" accesskey="5" title="">Contact Us</a>

    </li>
</ul>
</div>

// CSS

/** MENU */
#menu {
    position:relative;
    height: 110px;
}
#menu ul {
    margin: 0px;
    padding: 0px;
    float:left;
    line-height: 110px;
}
#menu li {
    list-style:none;
}
#menu>ul>li {
    float: left;
    margin-right: 1px;
    position:relative;
}
#menu>ul>li ul {
    height:100%;
    position:absolute;
    bottom:-100%
}
#menu>ul>li ul>li {
    bottom:0px;
    display:none;
    width:15em;
    float:left;
}
#menu>ul>li:hover ul>li {
    display:block
}
#menu a {
    display:block;
    padding: 0px 30px;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFFFFF;
    background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
    text-decoration: none;
    cursor:pointer;
    background:rgba(200, 200, 200, 1);
}
#menu .active {
}