导航风格求助

各位老师您好：
刚开始学习自己去修改模板风格就遇到问题无法继续，请教各位，
如下面图片所示，我要修改成这样的风格，如何来修改CSS

1.                         #nv { overflow: hidden; padding-left: 3px; height: 31px; {MENUBGCODE}; }
   
2.                                 #nv li { float: left; padding-right: 1px; height: 31px; line-height: 31px; background: url({IMGDIR}/nv_na.gif) no-repeat; font-weight: 700; font-size: 14px; }
   
3.                                         .ie_all #nv li { line-height: 36px; }
   
4.                                         .ie6 #nv li { line-height: 31px; }
   
5.                                         #nv li a { float: right; padding: 0 20px; height: 31px; }
   
6.                                                 #nv li a { color: {MENUTEXT}; }
   
7.                                                 #nv li span { display: none; }
   
8.                                         #nv li.a { margin-left: -1px; {MENUHOVERBGCODE}; }
   
9.                                                 #nv li.a a { color: {MENUHOVERTEXT}; }
   
10.                                                 #nv li a:hover { background: url({IMGDIR}/nv_na.gif) no-repeat; }
    
11.                                                 #nv li.hover a:hover, #nv li.hover a { background: url({IMGDIR}/nv_na.gif) no-repeat; }
    
12. 
    
13.                         #mu { position: relative; z-index: 1; }
    
14.                                 .ie6 #mu, .ie7 #mu { line-height: 0; font-size: 0; }
    
15.                                 #mu ul { background: url({IMGDIR}/mu_bg.gif) repeat -x; line-height: 22px; z-index: 2; font-size: 12px; }
    
16.                                         #mu li { float: left; height: 32px }
    
17.                                                 #mu a { float: left; display: inline; margin: 5px 6px; padding: 0 10px; white-space: nowrap; }
    
18.                                                         #mu a:hover { margin: 4px 5px; border: 1px solid {SPECIALBORDER}; background: {SPECIALBG}; color: {HIGHLIGHTLINK}; text-decoration: none; }
    
19.                                 .floatmu { position: absolute; left: 0; top: 0; }
    
20. 
    
21. 
    
22.                         #um { float: right; padding-top: 10px; padding-right: 60px; _padding-right: 54px; line-height: 2.3; }
    
23.                                 #um, #um a { color: {HEADERTEXT}; }
    
24.                                 #um p { text-align: right; }
    
25.                                 #um .avt { display: inline; margin-right: -60px; }
    
26.                                 .vwmy { padding-left: 16px; background: url({IMGDIR}/user_online.gif) no-repeat 0 2px; }
    
27.                                         .vwmy.qq { background: url({IMGDIR}/connect_qq.gif) no-repeat scroll 0 0; padding-left: 20px; }
    
28.                                 /* .topnav .new, .sch .new 分别为为个人中心和搜索页面头部新消息样式 */
    
29.                                 #um .new, .topnav .new, .sch .new, #toptb .new { padding-left: 20px; background-repeat: no-repeat; background-position: 0 50%; color: {HIGHLIGHTLINK}; font-weight: 700; }
    
30.                                         #myprompt.new { background-image: url({IMGDIR}/notice.gif); background-position: 3px 50%; }
    
31.                                         #pm_ntc.new { background-image: url({IMGDIR}/new_pm.gif); }
    
32.                                         #task_ntc { background-image: url({STATICURL}image/feed/task.gif); }
    
33.                                 #um .pipe { margin: 0 5px 0 0; }
    
34. 
    
35.                                 #extcreditmenu { margin-right: 2px !important; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; }
    
36.                                         #extcreditmenu.a { position: relative; z-index: 302; margin-right: 1px !important; border: 1px solid; border-color: {DROPMENUBORDER}; border-bottom: none; background-color: {WRAPBG}; }
    
37.                                         #extcreditmenu_menu { margin-top: -1px; width: auto; }
    
38.                                                 #extcreditmenu_menu li { float: none; display: block; padding-left: 10px !important; padding-right: 3em !important; }
    
39. 
    
40.                                 #qmenu { float: right; display: inline; margin: 3px 4px 0; padding: 0 12px 0 0; width: 83px; height: 26px; background: url({IMGDIR}/qmenu.png) no-repeat 0 0; line-height: 26px; text-align: center; color: {HIGHLIGHTLINK}; font-weight: 700; text-shadow: 0 1px 0 #FFF; overflow: hidden; }
    
41.                                         #qmenu:hover { text-decoration: none; }
    
42.                                         #qmenu.a { position: relative; z-index: 302; background-position: 0 -30px; }
    
43.                                         .ie8 #qmenu { line-height: 30px; }
    
44.                                 #qmenu_menu { margin-top: -1px; padding: 20px 5px 10px; width: 180px; border-color: #9A9A9A; }
    
45.                                         .ie_all #qmenu_menu { margin-left: 1px; }
    
46.                                                 .ie9 #qmenu_menu { margin-left: 0; }
    
47.                                         #qmenu_menu ul li { float: left; }
    
48.                                         #qmenu_menu ul a { margin-bottom: 10px; padding: 42px 0 0; width: 60px; border: none; background: url({IMGDIR}/noicon.gif) no-repeat 50% 0; text-align: center; }
    
49.                                                 #qmenu_menu ul a:hover { background-color: transparent; color: {HIGHLIGHTLINK}; text-shadow: none; }
    

复制代码

有需要可以联系我们 。