http://webgaku.hateblo.jp/entry/20120604/1338778651

#nav {
font-size: 1em;
width: 150px;
}
#nav ul {
margin: 0;
padding: 0;
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
}
#nav li {
list-style-type: none;
}
#nav a {
color: #000;
display: block;
height: 25px;
line-height: 25px;
padding-left: 10px;
text-decoration: none;
width: 100%;
}
#nav a:hover{
text-decoration: none;
}
#nav li:hover {
background: #cdeefc;
position: relative;
}

/*第1階層*/
ul.top-level {
background-color: #fff;
}
ul.top-level li {
border-bottom: 1px solid #aaa;
}
ul.top-level li.category1 {
border-left: 4px solid #f60;
background: -moz-linear-gradient(top, #eee, #fff 75%);
background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff));
}
ul.top-level li.category2 {
border-left: 4px solid #366CD6;
background: -moz-linear-gradient(top, #eee, #fff 75%);
background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff));
}
ul.top-level li.category3 {
border-left: 4px solid #32CC60;
background: -moz-linear-gradient(top, #eee, #fff 75%);
background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff));
}

/*第2・第3階層共通*/
ul.sub-level {
display: none;
}
li:hover .sub-level {
border: 1px solid #aaa;
display: block;
position: absolute;
left: 120px;
top: -3px;
}
ul.sub-level li {
border: none;
float: left;
width: 150px;
}

/*第2階層*/
#nav .sub-level {
background-color: #fff;
}

/*第3階層*/
#nav .sub-level .sub-level {
background-color: #fff;
}
li:hover .sub-level .sub-level {
display: none;
}
.sub-level li:hover .sub-level {
display: block;
}