У меня есть раскрывающийся список в моем TopBar, построенный с помощью CSS Bootstrap.

У меня есть 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>

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

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

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

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