two level menu - second level doesn't appear

Question

I have created two level vertical menu. On mouse over, second level should appear, but it doesn't.

The first level menu is ul.side_nav, the second level menu is ul.side_sub_nav. I thought that the following should show second menu on mouse over:

.side_nav li:hover>ul.side_sub_nav>li {
    color: red;
    display:block; //it was display:none; before
}

Here is my full code:

<ul class="side_nav">
    <li class="li_sb "> <a href="index.php?p=subcategories_list&amp;cat=1">Vie professionnelle</a>

    </li>
    <ul class="side_sub_nav">
        <li>Vie professionnelle - subc2</li>
        <li>Vie professionnelle - subc1</li>
    </ul>
    <li class="li_sm "> <a href="index.php?p=subcategories_list&amp;cat=4">Administration et droit</a>

    </li>
    <ul class="side_sub_nav">
        <li>Administration et droit - subc1</li>
        <li>Administration et droit - subc2</li>
    </ul>
    <li class="li_sp "> <a href="index.php?p=subcategories_list&amp;cat=5">Vie pratique</a>

    </li>
    <ul class="side_sub_nav">
        <li>Vie pratique - subc1</li>
        <li>Vie pratique - subc2</li>
    </ul>
    <li class="li_sh "> <a href="index.php?p=subcategories_list&amp;cat=6">Immobilier et logement</a>

    </li>
    <ul class="side_sub_nav">
        <li>Immobilier et logement - subc1</li>
        <li>Immobilier et logement - subc2</li>
    </ul>
</ul>

css:

.side_nav {
    list-style-type: none;
    list-style-image: none;
    width: 250px;
    margin-bottom: 37px;
}
.side_sub_nav {
    list-style-type: none;
    list-style-image: none;
    width: 250px;
    display: none;
}
.side_nav li {
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-position: 8px center, 232px center;
    height: 42px;
    line-height: 42px;
    border: 1px solid #dddddd;
    font-size: 16px;
    padding-left: 45px;
    cursor: pointer;
}
.side_sub_nav li {
    background-color: #008ec9;
    height: 42px;
    line-height: 42px;
    border: 1px solid #dddddd;
    font-size: 12px;
    padding-left: 22px;
    cursor: pointer;
    color: white;
}
.side_nav li a, .side_sub_nav li a {
    text-decoration: none;
    color: #3f3f3f;
}
.side_nav li:hover, .side_nav li.active {
    background-color: #008ec9;
}
.side_nav li:hover a, .side_nav li.active a {
    color: white;
}
.side_nav li:hover>ul.side_sub_nav>li {
    color: red;
    display:block;
}

jsfiddlE: http://jsfiddle.net/Sggsz/

EDIT: I need that first and second level menu are displayed one after another. So when second level appears, it should push first level items down.

Answer 1

UPDATED ANSWER 2

We still have nested <ul class="side_sub_nav"> inside the list item <li>. But this time around we are targeting the anchor tags <a> in the list items <li>. So all the styling that was being applied to the list items are now being applied to the anchor tags. I also added anchor tags to the second level list items which you did not have before.

I think the main issue you were having is that your second level menus were siblings (adjacent) to the elements you were hovering at the top level. This made it hard to target.

Here is an updated jsFiddle: http://jsfiddle.net/Sggsz/6/, along with the HTML and CSS below.

HTML

<ul class="side_nav">
     <li class="li_sb ">
          <a href="index.php?p=subcategories_list&amp;cat=1">Vie professionnelle</a>
          <ul class="side_sub_nav">
               <li><a href="#">Vie professionnelle - subc2</a></li>
               <li><a href="#">Vie professionnelle - subc1</a></li>
          </ul>
     </li>
     <li class="li_sm ">
          <a href="index.php?p=subcategories_list&amp;cat=4">Administration et droit</a>
          <ul class="side_sub_nav">
               <li><a href="#">Administration et droit - subc1</a></li>
               <li><a href="#">Administration et droit - subc2</a></li>
          </ul>
     </li>
     <li class="li_sp ">
          <a href="index.php?p=subcategories_list&amp;cat=5">Vie pratique</a>
          <ul class="side_sub_nav">
               <li><a href="#">Vie pratique - subc1</a></li>
               <li><a href="#">Vie pratique - subc2</a></li>
          </ul>
     </li>
     <li class="li_sh ">
          <a href="index.php?p=subcategories_list&amp;cat=6">Immobilier et logement</a>
          <ul class="side_sub_nav">
               <li><a href="#">Immobilier et logement - subc1</a></li>
               <li><a href="#">Immobilier et logement - subc2</a></li>
          </ul>
     </li>
</ul>

CSS

.side_nav, .side_sub_nav {
    list-style: none;
    width: 250px;
}
.side_nav {
    margin-bottom: 37px;
}
.side_sub_nav {
    display: none;
}
.side_nav li:hover .side_sub_nav {
    display:block;
}
.side_nav a,
.side_sub_nav a {
    height: 42px;
    line-height: 42px;
    border: 1px solid #dddddd;
    text-decoration: none;
}
.side_nav a {
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-position: 8px center, 232px center;
    font-size: 16px;
    width: 205px;
    padding-left: 45px;
    display: block;
    color: #3f3f3f;
}
.side_sub_nav a {     
    background-color: #008ec9;
    font-size: 12px;
    padding-left: 22px;
    color: white;
}
.side_sub_nav a:hover {
    color: red;
}

ANSWER 1

You should be nesting your sub menu in your list elements like so:

HTML

<ul class="side_nav">
     <li class="li_sb ">
          <a href="index.php?p=subcategories_list&amp;cat=1">Vie professionnelle</a>
          <ul class="side_sub_nav">
               <li>Vie professionnelle - subc2</li>
               <li>Vie professionnelle - subc1</li>
          </ul>
     </li>
     <li class="li_sm ">
          <a href="index.php?p=subcategories_list&amp;cat=4">Administration et droit</a>
          <ul class="side_sub_nav">
               <li>Administration et droit - subc1</li>
               <li>Administration et droit - subc2</li>
          </ul>
     </li>
</ul>

CSS

.side_sub_nav {
     display: none;
}
.side_nav li:hover .side_sub_nav {
     display: block;
}

Answer 2

I changed a little bit your code: 
http://jsfiddle.net/Sggsz/4/

Answer 3

The selector you are using is looking for ul.side_sub_nav as a direct sibling to .side_nav li:hover. However, your markup has your .side_sub_nav as a sibling, so the styling you specified will not be applied.

What I believe you're looking for is the direct sibling selector. Instead of using >, use + instead.