CSS: how to get class inside class - html

Question

I am making a dropdown on hover, but I have a problem with CSS. I have class inside class inside a div etc. The problem is that the dropdown list doesn't show. I think that I am doing something wrong with CSS selectors.
This is html code:
<div id="header">
<div class="row-2">
<ul class="hover">
<li>Home</li>
<li><a>Pershkrimi</a>
<div class="button">
<ul class="file_menu">
<li>klzxd</li>
</ul>
</div>
</li>
<li>
Trailera
</li>
<li>
Kategorite
</li>
<li class="last">
Sitemap
</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;
}
NOTE: I just added slideshow CSS, that i think is overwriting dropdown
Thank You,

Answer 1

There are a lot of things I would do differently with how you've got your CSS laid out, but if you're looking for a simple answer, use the > child selector instead of just a space in order to select only those lists that are in your row-2 class. For example,
#header .row-2>ul
will get only <ul> elements whose parent is a .row-2 element, which seems to be what you're looking for.