Question

我正在尝试构建这个下拉导航栏，我使用Sass进行样式化，使用jQuery进行下拉效果。我试图使导航栏内联，但它对我来说效果不佳。任何人都可以指出我正确的方向，我做错了什么？感谢。

这是我的HTML：

<!--Navigation Bar -->
<div class="navigation_bar">
    <nav>
        <ul>
        <li><a href="#">Home</a></li> |
        <li><a href="#">About</a></li> |
            <!-- <div class="sub_menu">
                <li><a href="#">sub_link</a></li>
                <li><a href="#">sub_link</a></li>
                <li><a href="#">sub_link</a></li>
            </div> -->
        <li><a href="#">Schedule</a></li> |
        <li><a href="#">Contact</a></li> |
        <li><a href="#">Gallery</a></li>
        </ul>
    </nav>
</div>

这是Sass：

    @mixin navigation_bar {
    nav {
    background: #fff;
    height: 100px;
    width: 100%;
    margin-top: 10px;

        ul, li {
            list-style-type: none;
            display: inline;

            a {
                font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
                font-size: 14px;
                text-decoration: none;
                color: #a4a4a4;
                padding: 30px;

                    &:hover {
                        color: #000;
                }
            }
        }
    }
}

.navigation_bar {
    @include navigation_bar;
}

Answer 1

下面的工作示例

Codepen

@mixin navigation_bar {
    nav {
    background: #fff;
    height: 100px;
    width: 100%;
    margin-top: 10px;

        ul {
            list-style-type: none;
            font-size: 0;

            li {
              display: inline-block;
              vertical-align: top;
              &:first-child a {
                background: #ddd;
              }
            }

            a {
                font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
                font-size: 14px;
                text-decoration: none;
                color: #a4a4a4;
                padding: 30px;
              background:#ddd url('http://i.imgur.com/tY2FYyp.png') left 50% no-repeat;
              display: block;

                    &:hover {
                        color: #000;
                }
            }
        }
    }
}

.navigation_bar {
    @include navigation_bar;
}

显示内联无法正常工作，使用Sass进行样式设计

1 个答案: