Menu vertical 2 niveles

<ul id="menu">
<li><a href="#">Menu 1</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a></li>
 <li><a href="#">Submenu 3</a></li>
 <li><a href="#">Submenu 4</a></li>
 </ul>
</li>
<li><a href="#">Menu 2</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a></li>
 <li><a href="#">Submenu 3</a></li>
 <li><a href="#">Submenu 4</a></li>
 </ul>
</li>
<li><a href="#">Menu 3</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a></li>
 <li><a href="#">Submenu 3</a></li>
 <li><a href="#">Submenu 4</a></li>
 </ul>
</li>
<li><a href="#">Menu sin submenu</a></li>
</ul>

#menu{
       -moz-border-radius:5px;
   -webkit-border-radius:5px;
        border-radius:5px;
        -webkit-box-shadow:1px 1px 3px #888;
      -moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #FFF;}
#menu ul li, #menu li:last-child{border:none}        
a{
  display:block;
    color:#FFF;
       text-decoration:none;
     font-family:'Helvetica', Arial, sans-serif;
       font-size:13px;
   padding:3px 5px;
  text-shadow:1px 1px 1px #325179;
}
#menu a:hover{
       color:#F9B855;
    -webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#6594D1;}
#menu ul a:hover{
   background-color:#FFF;
    color:#2961A9;
    text-shadow:none;
 -webkit-transition: color, background-color 0.2s linear;
}
ul{
  display:block;
    background-color:#2961A9;
 margin:0;
 padding:0;
        width:130px;
      list-style:none;
}
#menu ul{background-color:#6594D1;}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-image: url('https://lh6.googleusercontent.com/-8n6j0aMOSxQ/VArRGDzfR1I/AAAAAAAA-Ao/WdH0aMNpUVo/w9-h185-no/7.jpg');
    border-radius: 5px 5px 5px 5px;
    border: 4px double #F2DDDC;
    box-shadow: -2px -2px 7px #333333,2px 2px 7px #333333,2px 2px 7px #333333;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-image: url('http://img-fotki.yandex.ru/get/9066/39663434.52f/0_96f1b_9d287662_M.jpg');
    background-color: #ccc;
    color: #fff;
    border-radius: 5px 5px 5px 5px;
    border: 2px ridge #FEF5F6;
}
</style>