How to connect in styles?

Question

css

I'm scratching my head, I don't know how to connect them. Maybe I screwed up somewhere again or did not finish writing?

<div class="header">
      <div id="mainmenu" >
        <ul class="menu_nav">
        <li><a href="#">Главная</a></li>
        <li><a href="#">О союзе</a></li>
        <li><a href="#">Хроника новостей</a></li>
        <li><a href="#">Ссылки</a></li>
        <li><a href="#">Фотогалерея</a></li>
      </ul>
    </div>

.header {
  height: 206px;
  width: 968px;
  background: url(../img/loo.png);
}
.header ul{
  list-style: none;

}
.header ul li{
  position: relative;
    overflow:hidden;
    height:30px;
    margin:20px 0;
   }
#mainmenu ul {
    list-style:none;
    margin:0;
    padding:120px;
    position: relative;
    left:25%;
    float:left;
    font:14px ; Myriad Pro Regular;
    font-color: black;
    height:30px;
    text-shadow:  0px 1px 2px white;
}
#mainmenu ul li {
    position:relative;
    left:-50%;
    float:left;
    margin:0px;
    height:30px
}
#mainmenu ul li a {
    display:block;
    text-decoration:none;
    padding:4px 10px 5px 5px; 
}
#mainmenu ul li a:hover {
    color:#ffffff
}
#mainmenu a {
  background: #fff;
  padding:0px;

  

}

Answer 1

Apparently you just need to give menu-nav background: #fff

Answer 2

#mainmenu > .menu_nav > li > a by idea . And so everywhere, first the parent element then > then the child element