CSS Horizontal Drop Down Menu (Basic)

CSS Horizontal Drop Down Menu.css

/* menu structure (horizontal dropdown of three levels */
ul{margin:0;padding:0;}
li{list-style-type:none;}
ul.menu{z-index:100;}
ul.menu li{position:relative;display:inline-block;}
ul.menu li:hover > ul.sub-menu{display:block;}
ul.sub-menu{display:none;position:absolute;}
ul.sub-menu li{display:block;}
li a{display:block;}

/* menu levels */
ul.sub-menu{top:100%;left:0px;z-index:99;}
ul.sub-menu ul.sub-menu{top:10px;left:100%;z-index:98;}

/* menu styling */
a{padding:10px 20px;color:#fff;text-decoration:none;}
ul.menu{background:#22418C;border-top:1px solid black;border-bottom:1px solid black;}
ul.menu li{cursor:pointer;background:#22418C;}
ul.menu li:hover{background:#999;}
ul.menu li:hover > ul.sub-menu{border-top:1px solid black;}
.current_page_item, .current-page-ancestor{background:#999 !important;}

ul.sub-menu{border:1px solid #666;min-width:200px;box-shadow:0px 3px 3px #999;}
ul.sub-menu li{border-bottom:1px solid #aaa;background:#22418C;}
ul.sub-menu li:last-child{border:0px;}