html - CSS:如何在类中获取类

Question

我正在悬停时制作下拉菜单，但我遇到了 CSS 问题。我在 div 等内部的类中有类。问题是下拉列表没有显示。我认为我在 CSS 选择器方面做错了什么。

这是html代码:

<div id="header">
   <div class="row-2">                      
      <ul class="hover">
         <li><a href="index.php" class="active">Home</a></li>
         <li><a>Pershkrimi</a>
             <div class="button">
                <ul class="file_menu">
                   <li>klzxd</li>                           
                </ul>
            </div>                                  
        </li>
        <li>
           <a href="trailer.php">Trailera</a>
        </li>
        <li>
           <a href="categories.php">Kategorite</a>
        </li>   
        <li class="last">
           <a href="sitemap.html">Sitemap</a>
        </li>                       
      </ul>
   </div>                       
</div>

CSS:

#header .row-2  {
    height:51px;
}

#header .row-2 ul {
    width:100%;
    overflow:hidden;
}

#header .row-2 ul li  {
    float:left;
    font-size:20px;
    line-height:2.4em;
    margin-right:5px;
    background-color:#000;
}

#header .row-2 ul li.last  {
    margin-right:0;
}

#header .row-2 ul li a {
    text-decoration:none;
    color:#f0f0f0;width:184px;
    height:56px;float:left;
    background-image:url(images/nav-bg.gif);b
    ackground-repeat:no-repeat;
    background-position:0 0;
    text-align:center;
}

#header .row-2 ul li a:hover, #header .row-2 ul li a.active {
    color:#d72a18;
    background-image:url(images/nav-act.gif);
}

/*Dropdown*/
 #header .row-2 ul li div.button {
    height: 32px;
    width: 184px;
    margin: auto;
}
 #header .row-2 ul li div.button ul, li {
    margin: 0; 
    padding: 0; 
    list-style: none;
}
 #header .row-2 ul li div.button ul .file_menu {
    display: none;
    width: 300px;
    border: 1px solid #1c1c1c;
}

 #header .row-2 ul li div.button ul.file_menu li {
    background-color: #302f2f;
}

 #header .row-2 ul li div.button ul .file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

 #header .row-2 ul li div.button ul .file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

/幻灯片放映/

#slogan 
{
    width:100%;
    height:auto;
    position:relative;
    background:url(images/banner-bg.gif) no-repeat left top;
    color:#1d1d1d
}
#slogan .image 
{
    position:absolute;
    right:-30px;
    top:-11px;
    z-index:100;
    width:100%;
    height:auto;
    overflow: hidden; 
    background:url(images/banner-img.png) no-repeat left top
}
#slogan p 
{
    margin-bottom:23px
}
#slogan .inside 
{
    padding:  0 0 25px;
    width:939px
}
#page1 #content .box 
{
    margin:0
}
#page1 #header .row-2 ul li a 
{
    height:56px
}
#page1 #header .row-2 ul li.last a:hover 
{
    position:relative;z-index:2
}
.slideshow
{
    position:relative;
    width:500px;
    height:332px;   
}
.slideshow img
{
    position:absolute;
    left:4px;
    top:10px;       
}

注意:我刚刚添加了幻灯片 CSS，我认为它会覆盖下拉菜单谢谢你，

Answer 1

对于您的 CSS 布局方式，我会做很多不同的事情，但如果您正在寻找一个简单的答案，请使用 > child selector而不仅仅是一个空格，以便仅选择您的 row-2 中的那些列表类(class)。例如，

#header .row-2>ul

只会得到<ul>父级为 .row-2 的元素元素，这似乎是您要查找的内容。