导航无法显示内联

时间:2016-12-19 22:10:16

标签: css

我在显示内联导航栏时遇到了一些困难。这是我项目的html和css代码。

<nav>
    <ul>
        <li>
            <%=link_to "Tradery", current_user%>
        </li>
        <li>
            <%=form_tag( "/search", method: "get") do %>
            <%=label_tag(:q, "") %>
            <%=text_field_tag(:q) %>
            <%=submit_tag( "Search") %>
            <%end%>
        </li>
        <li>
            <%=link_to "Tradezone", '#' %>
        </li>
        <li>
            <%=link_to "Messages", '#' %>
        </li>
        <li>
            <%=link_to "Notifications", '#' %>
        </li>
        <li>
            <%=link_to title="Acount" , "#" %>
            <ul>
                <li>
                    <%=link_to "user.business.name", '#'%>
                </li>
                <li>
                    <%=link_to "settings", '#'%>
                </li>
                <li>
                    <%=link_to "signout", '#'%>
                </li>
                <li>
                    <%=link_to "create business", '#'%>
                </li>
                <li>
                    <%=link_to "settings", '#'%>
                </li>
                <li>
                    <%=link_to "signout", '#'%>
                </li>
            </ul>
        </li>
    </ul>
</nav>

代码的CSS:

nav ul ul {
    display: none;
}
nav ul li:hover> ul {
    display: block;
}
nav ul {
    display: inline-table;
    position: relative;
    background: -moz-linear-gradient list-style: none;
    top: 100%;
}

1 个答案:

答案 0 :(得分:1)

您确定要向我们展示实际代码吗?没关系,我希望这可以帮到你!

<强>的CSS:

nav ul {
    list-style:none;
    margin:0;
    padding:0;
    overflow: hidden;
}

nav ul li {
    display:inline;
}

nav ul li a {
    display:inline-block;
}