所以我們有上面的菜單。我需要構建一個WordPress模板。我不知道如何使懸停和活躍的狀態。現在,直到我有這樣的:
HTML(其次WordPress會如何生成代碼):
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li>
<a href="#" title="">
Home
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
</ul><!-- #menu-primary-navigation -->
</div><!-- .menu-primary-navigation-container -->
</nav><!-- #access -->
然後我有CSS:
#nav-main {
width: 956px;
height: 44px;
border: 1px solid #a5a5a5;
background: url(images/bg-nav-main.jpg) repeat-x;
}
.menu-primary-navigation-container {}
#menu-primary-navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu-primary-navigation li {
height: 44px;
display: inline-block;
}
#menu-primary-navigation li a {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
text-decoration: none;
line-height: 44px;
padding: 0 46px;
}
#menu-primary-navigation li a:hover {}
而這一切。在這裏我被困住了。這些斜線是這個菜單的壞點。
任何想法?
謝謝你,怎麼樣梯度slashlines? – 2012-02-16 15:34:43
這不就是好切的問題嗎?爲該菜單元素設置曲面不透明度的光滑邊緣,因此兩個相鄰的元素將爲您提供該漸變斜線。 – ogur 2012-02-16 18:51:06
我想向你展示準備好的例子,但恐怕我的「藝術」技能很差。 – ogur 2012-02-16 18:59:03