0

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

我有一个类似于下面的菜单。和它的下拉。现在嵌套的 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);
}
4

1 回答 1

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;
        }
于 2013-04-08T21:53:56.093 回答