html - 在CSS菜单上添加下拉效果

Question

*在发布问题之前，我用尽全力搜索了该网站以寻找答案，我尝试了多种解决方案，但没有任何解决方案适用于我的确切代码。虽然您可能会在此站点上找到重复的问题。我不认为它是重复的，除非编码和解决方案完全相同。该网站上没有任何内容适用于我的确切编码，因此我需要发布我的确切代码以寻求帮助。 *

我有一个如下所示的菜单。和下拉就可以了。现在，嵌套的 ul 只是简单地散布在整个页面中。它需要显示在管理下的一个漂亮的下拉部分中。我曾尝试搜索此内容并询问我的同事，他们以前都没有这样做过。我在这里创建了一个 jsFiddle:http://jsfiddle.net/z3Lpm/

<div id="menu"> 
 <ul>
   <li><a href="#">Home</a></li> 
   <li><a href="#">Administration</a> 
       <ul> 
           <li><a href="#">Products</a></li> 
       </ul> 
   </li> 
 </ul>
</div>

(不是我的完整菜单，但你明白了。)

然后是我的CSS:

#menu{
   width: 100%;
   border: 1px solid #000;
   height: 50px;
   background-color:#181818;
   font-family: Helvetica, sans-serif;
   font-size: 13px;
}

#menu ul{
    margin-top:  20px;
}

#menu ul li{
    list-style-type: none;
    display: inline;
    margin-left: 50px;
}

#menu ul li a:link{
   color: #FFF;
   text-decoration: none;
   text-transform: uppercase;
   padding-top: 40px;
   padding-bottom: 40px;
   padding-left: 20px;
   padding-right: 20px;
}

#menu ul li a:visited{
   color: #FFF;
   text-decoration: none;
   text-transform: uppercase;
}

#menu ul li a:hover{
   color: #FFF;
   background-color: #81B101;
   -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
   -moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.93);
   box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.93);
}

Answer 1

在这里，我没有改变颜色或任何东西，因为我不知道你用它们做什么。让我知道这是否适合您。

http://jsfiddle.net/talymo/LDNpG/

#menu{
    background-color:#181818;
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    height:50px;
}

    #menu ul{
        list-style:none;
        padding-top:15px;
    }

        #menu ul li{
            padding:0px 20px;
            width:auto;
            float:left;
            position:relative;
        }

        #menu ul li:hover > ul{
            display:block;     
        }

            #menu ul li a{
                color: #FFF;
                text-decoration: none;
                text-transform: uppercase;
                padding-top: 40px;
                padding-bottom: 40px;
                padding-left: 20px;
                padding-right: 20px;
            }

            #menu ul li a:hover{
               color: #FFF;
               background-color: #81B101;
               -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
               -moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.93);
               box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.93);
            }

        #menu ul li ul{
            overflow:hidden;
            padding:0;
            margin:0;
            display:none;
            position:absolute;
            top:20px;
        }