CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
alchuang
alchuang

Reputation: 3571

Bootstrap horizontal navigation bar with vertical dropdown CSS

I have just started playing with twitter bootstrap and am attempting to build a site from scrap with it. I am having trouble creating a horizontal nav bar with vertical dropdowns with each <li> as a new row. (My current dropdown has all <li> in the same row).

Can someone please teach me how?

Navbar HTML:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="NIS.html">NIS<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">test1</a></li>
            <li><a href="#">test2</a></li>
            <li><a href="#">test3</a></li>
          </ul>

        </li>
        <li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="TNU.html">TNU</a></li>
        <li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="NIC.html">NIC</a></li>
        <li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="trial.html">trial</a></li>
        <li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
</div><!-- /.navbar -->

CSS:

 .navbar .navbar-inner {
    padding: 0;
  }
  .navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
  }
  .navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
  }
  .navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
  }
  .navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
  }
  .navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
  }

Upvotes: 0

Views: 6540

Answers (1)

thoroughly-confused
thoroughly-confused

Reputation: 110

This is the answer I gave that solved a very similar problem for myself and someone else. Maybe it'll work for you.

I had a similar problem. I narrowed it down to the "display: table-cell;" entry. Through looking around and 'playing' I managed to find a fix for my situation

First:

.navbar .nav li .dropdown-menu li { display: block; width: auto; }

to set the list items under the dropdown to display as a block (with max width of the dropdown menu holder).

Secondly:

.dropdown-menu { left:auto; }

to place the dropdown under the correct menu-item.

Upvotes: 1

Related Questions