Show Submenu when hover - hover

Question

I'm new in jQuery and I need to show the submenu when the cursor hovers.
this is my code:
<li class="menu">
Qui sommes nous?
<ul class="submenu">
<li>Notre histoire</li>
<li>Notre philosophie</li>
</ul>
</li>

Answer 1

You can do that with css, using visbility style.
There is example :
ul
{
position:relative; /*need for properly .submenu positioning */
margin:0; padding:0;
}
li
{
list-style-type:none; /*remove style type (circles) for all li*/
}
.menu
{
display:inline-block;
}
/*submenu will be placed under parent li and hidden, until .menu is hovered*/
.submenu
{
visibility:hidden;
position:absolute;
top:100%;
}
/*on hover .menu, .submenu will be showed*/
.menu:hover > .submenu
{
visibility:visible;
}
<ul>
<li class="menu">
Qui sommes nous?
<ul class="submenu">
<li>Notre histoire</li>
<li>Notre philosophie</li>
</ul>
</li>
<li class="menu">
Qui sommes nous?
<ul class="submenu">
<li>Notre histoire</li>
<li>Notre philosophie</li>
</ul>
</li>
<ul>

Answer 2

This can be done using pure CSS. Try this:
.submenu {
height: 0;
width: auto;
background: url(../../../themes/images/...png) repeat;
position: relative;
top: 15px;
line-height: 11px;
}
.submenu li {
height: 12px;
font-size: 12px;
color: #FFF;
padding: 15px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
display: none;
cursor: pointer;
}
.submenu li:hover {
color: #FFF;
background: #A526CA;
}