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;
        }

在css菜单上添加下拉效果

1 个答案: