为wordpress的Twenty Twelve主题定制导航栏菜单

本博客使用的事wordpress模板，个人喜欢简洁，也就选择了Twenty Twelve主题，但是这个主题太淡了，于是开始对其进行改进。首先是导航菜单。这个得编辑style.css了。

个人原创，版权所有，转载请注明原文出处，并保留链接：

http://www.embbnux.com/2014/03/18/wordpress_twentytwelve_theme_nav_menu

style.css文件在wordpress的安装目录下： /wp-content/theme/twentytwelve目录下，不同的主题要到不同的目录下，这里选择twentytwelve。

一 、导航栏背景色

这里采用黑色，如你所见，本站的菜单栏样式。

打开style.css,修改.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul 的属性，找到和下面相似的语句，大概在200多行：

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
background:black;
display: none;
}

就是添加背景颜色。

二 、更改字体颜色

修改小宽度属性里面的导航栏属性：

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

}

找到.main-navigation属性,改为如下语句：

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
background:black;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
padding: 0 15px 0 15px;
border-bottom: 0;
color: #dfdfdf;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;

}
.main-navigation li a:hover {
background: #8f8f8f;
color: #fff;

}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0  0 0 10px;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #ffffff;
font-weight: bold;
}

设置成字体白色，加粗。鼠标停留改变背景色，以及修改间距 margin和padding.这样就完成啦