CODEWITHSUNDEEP
twitter-bootstrapmenuhtml-selectnavbar
user2780362
user2780362

Reputation: 67

Horizontal menu with dropdown

I'm trying to have a horizontal menu of items that all have dropdowns, but keeps going vertical and I cannot seem to figure out why. the a tags are always taking up with full width of my page which is 900px. But there is no style that is defining that. So I'm lost, any help would be greatly appreciated.

 <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>

Upvotes: 1

Views: 1154

Answers (1)

Able
Able

Reputation: 3912

Are u using bootstrap 3, is it so, this code will work, see the working 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>

Upvotes: 1

Related Questions