基础菜单样式

Question

我想在我的菜单中添加垂直条，但无法解决。

正在尝试使用此代码：

$(document).ready(function () {
    $(document).foundation();
    
})

.top-bar {
    background: #fff;
}

.top-bar-section ul li{
     background: #fff !important;
}

.top-bar-section li a:not(.button) {
    background: #fff !important;
    color: #4a4a4a !important;
    font-weight:bolder;    
}

.top-bar-section li a:not(.button):hover {
    background: #ebebeb !important;   
}

.top-bar-section ul li.active > a {
    background: #ebebeb !important;  
}

.top-bar-section ul li.active > a:hover {
    background: #ebebeb !important;   
}

.top-bar-section li:before {
content: " | ";
}

.top-bar-section li:first-child:before {
content: none;
}

<div>
    <nav class="top-bar" data-topbar data-options="is_hover: false">
        <ul class="title-area">
            <li class="name">
                <h1>
                    <a href="#"></a>
                </h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
            <ul>
        <li>
            <a href="/ukih" target="_self">Home</a>
        </li>
        <li>
            <a href="/ukih/about" target="_self">About Us</a>
        </li>
        <li>
            <a href="/ukih/projects" target="_self">Projects</a>
        </li>
        <li>
            <a href="/ukih/investment" target="_self">Investments</a>
        </li>
        <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
            </ul>
        </section>
    </nav>
</div>

当我这样做时，整个菜单向下移动。我还尝试将它添加到 a 标签之前，这可能会好一点，因为它将它添加到菜单项的前面，但因为它在 li 标签内，我无法使其很好地居中菜单项。它只是位于每个项目的前面。

知道如何做到这一点吗？

Answer 1

尝试使用以下 CSS。

基本上：

border-right: 1px solid;

在您的菜单项之间添加 "line"。

ul > li:last-child { border-right: 0;}

删除右侧最后一项的边框。

此处示例：

http://jsfiddle.net/r46s08Lp/3/

.top-bar {
    background-color: white;

}

.top-bar-section li a:not(.button) {
    background: #fff !important;
    color: #4a4a4a !important;
    font-weight:bolder;    
}

ul > li {
    border-right: 1px solid;

}
ul > li:last-child {
    border-right: 0;

}

如有必要，您可以使用以下 CSS 调整 "line" 的高度：

.top-bar-section li a:not(.button) {height: 50px;}

基础菜单样式

Foundation Menu Styling

css

menu

zurb-foundation