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

/ SLIDESHOW /

#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类中的那些列表。例如，

#header .row-2>ul

只会获得其父级为<ul>元素的.row-2个元素，这些元素似乎就是您所需要的。

CSS：如何在类中获取类

1 个答案: