如何添加下拉菜单使用CSS？ [英] How to add drop down menu using CSS?

问题描述

我有一个现有的网站下面的菜单代码，我想添加更多的东西在我的网站，但用户需要徘徊到这些页面，请帮助我添加一个子菜单的代码我有。请帮助？

I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?

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></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

/** HEADER */

#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}

#header {
overflow: none;
}

/** LOGO */

#logo {
float: left;
width: 10px;
height: 100px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
}

#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}

/** MENU */

#menu {
float: right;
height: 110px;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin-right: 1px;
}

#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}

#menu .active
{
background: rgba(0,0,0,0.70);
}

推荐答案

工作菜单：

给你快速小提琴

// 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 {
}

这篇关于如何添加下拉菜单使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！