CSS不能使用Wordpress自定義菜單

Question

我想在我的Wordpress主題中安裝自定義菜單。我已成功啓用該功能並在我的佈局中嵌入了菜單，唯一的問題是CSS不能用於菜​​單。

我有一個名爲NAV的自定義CSS，我也嘗試將CS​​S2從Twenty Eleven複製粘貼到我的CSS（稱爲訪問）中。但不管我做什麼，導航風格都不會改變。我開始認爲它可能是我的嵌入代碼。那就是：

<?php wp_nav_menu(array('sort_column' => 'menu_order', 'container_class' => 'access', 'menu_class' => 'access')); ?> 

這裏是生成的HTML：

<div class="access"> 
<ul id="menu-home" class="access"> 
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://www.studentbridges.org/new/sample-page/">About Us</a> 
<ul class="sub-menu"> 
<li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="http://www.studentbridges.org/new/sample-page/history/">History</a>  
</li> 
</ul> 
</li> 
</ul> 
</div> 

這裏是相關的CSS：

#access { 
background: #222; /* Show a solid color for older browsers */ 
background: -moz-linear-gradient(#252525, #0a0a0a); 
background: -o-linear-gradient(#252525, #0a0a0a); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */ 
background: -webkit-linear-gradient(#252525, #0a0a0a); 
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
clear: both; 
display: block; 
float: left; 
margin: 0 auto 6px; 
width: 100%; 
} 
#access ul { 
font-size: 13px; 
list-style: none; 
margin: 0 0 0 -0.8125em; 
padding-left: 0; 
} 
#access li { 
float: left; 
position: relative; 
} 
#access a { 
color: #eee; 
display: block; 
line-height: 3.333em; 
padding: 0 1.2125em; 
text-decoration: none; 
} 
#access ul ul { 
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
display: none; 
float: left; 
margin: 0; 
position: absolute; 
top: 3.333em; 
left: 0; 
width: 188px; 
z-index: 99999; 
} 
#access ul ul ul { 
left: 100%; 
top: 0; 
} 
#access ul ul a { 
background: #f9f9f9; 
border-bottom: 1px dotted #ddd; 
color: #444; 
font-size: 13px; 
font-weight: normal; 
height: auto; 
line-height: 1.4em; 
padding: 10px 10px; 
width: 168px; 
} 
#access li:hover > a, 
#access ul ul :hover > a, 
#access a:focus { 
background: #efefef; 
} 
#access li:hover > a, 
#access a:focus { 
background: #f9f9f9; /* Show a solid color for older browsers */ 
background: -moz-linear-gradient(#f9f9f9, #e5e5e5); 
background: -o-linear-gradient(#f9f9f9, #e5e5e5); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ 
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); 
color: #373737; 
} 
#access ul li:hover > ul { 
display: block; 
} 
#access .current-menu-item > a, 
#access .current-menu-ancestor > a, 
#access .current_page_item > a, 
#access .current_page_ancestor > a { 
font-weight: bold; 
} 

#img {border-bottom:2px solid #9bc5c4;margin:0;padding:0;max-height:125px;overflow:hidden;} #block-cck_blocks-field_hdr_img {height:128px;overflow:hidden;} 
#nav {height:45px;background:url(img/main-nav-bkgd.jpg) repeat-x  #26243c;width:1008px;height:45px;z-index:90;position:relative;} 
#nav ul.nice-menu {width:993px;margin:0 0 0 15px;padding:0;display:inline;} 
#nav ul.nice-menu li {display:block;float:left;background:none;border:none;position:relative;color:#FFF;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;height:45px;font-size:13px;font-weight:bold;} 
#nav ul.nice-menu li a {display:block;color:#FFF;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;padding:13px 23px 14px 23px;font-size:13px;font-weight:bold;text-decoration:none;} 
#nav ul.nice-menu li a:hover, #nav ul.nice-menu-down li.menuparent:hover a, #nav ul.nice-menu-down li.over a, #nav ul li.active-trail a {background:url(img/nav-over.jpg) repeat-x;} 
#nav ul.nice-menu li ul {position:absolute;top:45px;left:0;} 
#nav ul.nice-menu li ul li {width:200px;margin:0;padding:0;height:auto!important;} 
#nav ul.nice-menu li ul li a, #nav ul.nice-menu-down li.menuparent ul li a {font-size:11px;color:#231f20;font-family:Georgia, "Times New Roman", Times, serif;display:block;clear:both;padding:5px 20px;margin:0;width:160px;background:#dfccb0!important;border-bottom:1px solid #FFF;font-weight:normal;} 
#nav ul.nice-menu li ul li a:hover, #nav ul.nice-menu-down li.menuparent ul li a:hover {background:#d0b389!important;} 
#nav ul.nice-menu li ul li ul {display:none;} 

什麼我可以做錯誤的任何輸入？ ??

Answer 1

您的導航包裝有一個「活躍」的class，但在您的css中，您的目標是ID。

選項1

變化#access.access到

選項2（其可能更容易）

變化 <div class="access">到 <div id="access">

Working example