Раскрывающийся список с формой внутри с помощью twitter-bootstrap

У меня есть раскрывающийся список в моей верхней панели, созданный с помощью CSS-фреймворка Twitter Bootstrap.

У меня есть 3 проблемы, для которых я не могу найти решения:

1. Поля ввода текста и пароля слишком велики, как я могу их изменить? Увеличить раскрывающийся список тоже можно.
2. Надписи для полей слишком темные, как я могу их немного осветлить?
3. Выпадающий список закрывается, когда я нажимаю на одно из полей. Мне нужно снова открыть его, а затем я могу печатать, пока не нажму кнопку в следующем поле. Значения сохраняются даже при закрытии раскрывающегося списка. Как я могу сделать так, чтобы он оставался открытым?

Вот снимок экрана с задачами 1 и 2:

Также вот HTML-код для TopBar в его нынешнем виде.

<div class='topbar-wrapper'>
  <div class='topbar'>
    <div class='topbar-inner'>
      <div class='container'>
        <h3>
          <a href="/">Webworld</a>
        </h3>
        <ul class='nav'>
          <li>FILLER...</li>
        </ul>
        <ul class='nav secondary-nav'>
          <li class='dropdown' data-dropdown='dropdown'>
            <a href="#" class="dropdown-toggle">Login</a>
            <div class='dropdown-menu' id='signin-dropdown'>
              <form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
                <fieldset class='textbox'>
                  <label id='js-username'>
                    <span>Username</span>
                    <input autocomplete="on" id="username" name="username" type="text" />
                  </label>
                  <label id='password'>
                    <span>Passwort</span>
                    <input id="userpassword" name="userpassword" type="password" />
                  </label>
                </fieldset>
                <fieldset class='subchk'>
                  <input name="commit" type="submit" value="Log In" />
                </fieldset>
              </form>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Там скрытый ввод нужен для рельсов и создается автоматически.

Я уже пытался скопировать реализацию формы входа в систему, которую использует twitter, но когда я это попробовал, TopBar имеет высоту около 250 пикселей, а содержимое раскрывающегося списка открыто, а не закрывается.

У меня пока нет собственного CSS или JavaScript, за исключением верхнего отступа в 40 пикселей в теле, как это предлагается в документации начальной загрузки.

Может ли кто-нибудь помочь мне с этим?