Question

我正在尝试一个水平菜单的项目，所有项目都有下拉，但继续垂直，我似乎无法弄清楚为什么。 a标签总是占用我的页面的全宽，即900px。但是没有一种风格可以定义。所以我迷失了，任何帮助都会非常感激。

 <div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Starting a Business</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web development</a></li>
                    <li><a href="#">Wordpress Theme development</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Starting a Business</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web development</a></li>
                    <li><a href="#">Wordpress Theme development</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Starting a Business</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web development</a></li>
                    <li><a href="#">Wordpress Theme development</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Starting a Business</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web development</a></li>
                    <li><a href="#">Wordpress Theme development</a></li>
                </ul>
            </li>
        </ul>
    </div>

Answer 1

您使用的是bootstrap 3吗？是这样，此代码可以使用，请参阅 fiddle ，

<div class="navbar navbar-default">
    <div class="navbar-header"></div>
    <ul class="nav navbar-nav">
        <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Starting a Business</a>

            <ul
            class="dropdown-menu">
                <li><a href="#">Web Design</a>
                </li>
                <li><a href="#">Web development</a>
                </li>
                <li><a href="#">Wordpress Theme development</a>
                </li>
    </ul>
    </li>
    <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Starting a Business</a>

        <ul
        class="dropdown-menu">
            <li><a href="#">Web Design</a>
            </li>
            <li><a href="#">Web development</a>
            </li>
            <li><a href="#">Wordpress Theme development</a>
            </li>
            </ul>
    </li>
    <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Starting a Business</a>

        <ul
        class="dropdown-menu">
            <li><a href="#">Web Design</a>
            </li>
            <li><a href="#">Web development</a>
            </li>
            <li><a href="#">Wordpress Theme development</a>
            </li>
            </ul>
    </li>
    <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Starting a Business</a>

        <ul
        class="dropdown-menu">
            <li><a href="#">Web Design</a>
            </li>
            <li><a href="#">Web development</a>
            </li>
            <li><a href="#">Wordpress Theme development</a>
            </li>
            </ul>
    </li>
    </ul>
</div>

带下拉菜单的水平菜单

1 个答案: