css菜单导航

这是我在一个网站上看到的,CSS控制一个菜单,很经典实用
Css文件如下:css.css
@charset "UTF-8";
/* navigation.css
$Revision: 1.0 $
(c) 2008 Fortinet, Inc. All rights reserved.
*/
/* Navigation Styles ------------------------------------------- */
#wrapper
{
 width:1000px;margin:0 auto;
}
#nav_bar {
 clear: both;
 background: url(./menu_bkrd.jpg) repeat-x;
 height: 26px;
 width: 100%;
}
#navigation {
 padding: 0 0 0 10px;
}
#nav, #nav ul {
 float: left;
 list-style: none;
 line-height: 1;
 padding: 0 0 0 0; /* 0 0 0 0.5em; */
 margin: 0; /* 0 0 1em 0; */
 /* border: solid 1px #33FF00; /* (Green) remove this item after testing */
 width:auto;
}
#nav a {
 font: 11px/12px Tahoma, Arial, Helvetica, Verdana, sans-serif;
 color: #6a737b;
 display: block;
 width: 150px; /* 6em; 3em; 10em -- 150px*/
 text-decoration: none;
 padding: 7px 10px 4px 6px; /* 0.5em 3.5em 0.2em .5em; 0.4em 0 0.2em 0; // 0.4em 2em 0.2em 2em; // 0.5em 2em; */
  margin: 0px; /* 0.5em 2em;  uncommented - fixes extra space on right for IE  0 0 0 1px */
 /* border: solid 1px #FF0000; /* (Red) remove this item after testing */
}
#nav a.top_nav {
 font: 12px Arial, Helvetica, sans-serif;
 color: #6a737b;
 text-align: center;
 width: 90px;
 margin: 0;
 padding: 6px 0 4px 0;
 text-decoration: none;
 font-weight: bold;
 white-space: nowrap; /*  */
}
#nav a.nav_parent {
 background: url(./rightarrow.gif) center right no-repeat;
 /* white-space: nowrap; /*  */
 /* border: solid 1px #FFFF00; /* (yellow) remove this item after testing */
}
#nav li {
 /*float: left;*/
 padding: 0;
 /* width: 150px; /* 7.5em; 10em; 12em  178px; this has no affect whatsoever */
 /* border: solid 1px #FFFF00; /* (yellow) remove this item after testing */
}
#nav li.top_nav