Sto creando un piccolo form dropdown (cosa che prima non mi ha mai dato problemi), ma... il menu cambia posizione a ogni cambio pagina, alternandosi tra queste due:

[Risultato giusto]
ok.JPG
[Risultato sbagliato]
ko.JPG

Credo sia colpa del form perché quando tolgo il secondo input dal codice, il risultato sbagliato non si presenta...

(L'errore è in chrome, in firefox funziona tutto correttamente...)

Ecco il codice:

codice HTML:
<ul class="menu transition-children-all">
    <li class="dropdown">
        <a href="/login">{{_("Login")}}</a>
        <form action="/login" method="post" class="dropdown-menu">
            <div class="input-group-sm">
                <div class="add-on-active">@</div>
                <input type="email" name="email" placeholder="{{_('Email')}}">
            </div>
            <div class="input-group-sm">
                <div class="add-on-active">@</div>
                <input type="password" name="password" placeholder="Password">
            </div>
        </form>
    </li>
    <li>
        <a href="/registration">{{_("Registration")}}</a>
    </li>
</ul>
Chiedo scusa se il css è lunghissimo, se preferite chiedetelo e vi posto il codice scss che lo genera
codice:
body header nav ul.menu {
  display: inline-block;
  float: right;
  font-size: 14px;
  height: 100%;
}
body header nav ul.menu > li {
  float: left;
  height: 100%;
  vertical-align: middle;
}
body header nav ul.menu > li.dropdown {
  position: relative;
}
body header nav ul.menu > li.dropdown > .dropdown-menu {
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-color: #e7e7e7;
  border-style: solid;
  border-width: 1px;
  display: none;
  opacity: 0;
  padding: 15px;
  position: absolute;
  right: 0px;
}
body header nav ul.menu > li.dropdown:hover > .dropdown-menu {
  background-color: #f8f8f8;
  display: block;
  opacity: 1;
}
body header nav ul.menu > li > a {
  display: block;
  height: 100%;
  line-height: 20px;
  padding: 15px;
}
body header nav ul.menu > li > a:hover {
  background-color: #e6e6e6;
}
body header nav ul.menu li {
  display: block;
}
codice:
.transition, .transition-children > *, .transition-children-all * {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}


form button {
  cursor: pointer;
  outline: none;
}
form input {
  outline: none;
}
form input:focus {
  -moz-box-shadow: 0 0 0 1px #66afe9, inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  -webkit-box-shadow: 0 0 0 1px #66afe9, inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: 0 0 0 1px #66afe9, inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
form input[type="search"]::-webkit-search-cancel-button {
  -moz-appearance: none;
  -webkit-appearance: none;
}
form .input-group, form .input-group-sm, form .input-group-lg {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border-collapse: separate;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  display: table;
  font-size: 14px;
  margin: 10px;
  position: relative;
}
form .input-group.inline, form .inline.input-group-sm, form .inline.input-group-lg {
  display: inline-table;
  vertical-align: middle;
}
form .input-group > *, form .input-group-sm > *, form .input-group-lg > * {
  background-color: white;
  border-width: 0px;
  display: table-cell;
  height: 32px;
  margin: 0px;
  padding: 5px 10px;
  position: relative;
  vertical-align: middle;
  z-index: 2;
}
form .input-group > *:first-child, form .input-group-sm > *:first-child, form .input-group-lg > *:first-child, form .input-group > *:first-child.add-on > button, form .input-group-sm > *:first-child.add-on > button, form .input-group-lg > *:first-child.add-on > button, form .input-group > *.add-on-active:first-child > button, form .input-group-sm > *.add-on-active:first-child > button, form .input-group-lg > *.add-on-active:first-child > button {
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
form .input-group > *:last-child, form .input-group-sm > *:last-child, form .input-group-lg > *:last-child, form .input-group > *:last-child.add-on > button, form .input-group-sm > *:last-child.add-on > button, form .input-group-lg > *:last-child.add-on > button, form .input-group > *.add-on-active:last-child > button, form .input-group-sm > *.add-on-active:last-child > button, form .input-group-lg > *.add-on-active:last-child > button {
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
form .input-group > *.add-on, form .input-group-sm > *.add-on, form .input-group-lg > *.add-on, form .input-group > *.add-on-active, form .input-group-sm > *.add-on-active, form .input-group-lg > *.add-on-active {
  font-size: 14px;
  min-width: 32px;
  padding: 6px 12px;
  z-index: 1;
}
form .input-group > *.add-on.clickable, form .input-group-sm > *.add-on.clickable, form .input-group-lg > *.add-on.clickable, form .input-group > *.add-on.hoverable:hover, form .input-group-sm > *.add-on.hoverable:hover, form .input-group-lg > *.add-on.hoverable:hover, form .input-group > *.hoverable.add-on-active:hover, form .input-group-sm > *.hoverable.add-on-active:hover, form .input-group-lg > *.hoverable.add-on-active:hover, form .input-group > *.clickable.add-on-active, form .input-group-sm > *.clickable.add-on-active, form .input-group-lg > *.clickable.add-on-active {
  cursor: pointer;
}
form .input-group > *.add-on.hoverable:hover, form .input-group-sm > *.add-on.hoverable:hover, form .input-group-lg > *.add-on.hoverable:hover, form .input-group > *.hoverable.add-on-active:hover, form .input-group-sm > *.hoverable.add-on-active:hover, form .input-group-lg > *.hoverable.add-on-active:hover {
  background-color: #e6e6e6;
}
form .input-group > *.add-on-active, form .input-group-sm > *.add-on-active, form .input-group-lg > *.add-on-active {
  background-color: #e6e6e6;
}
form .input-group-sm {
  font-size: 12px;
}
form .input-group-sm > * {
  height: 28px;
}
form .input-group-sm > *.add-on, form .input-group-sm > *.add-on-active {
  min-width: 28px;
}
form .input-group-lg {
  font-size: 18px;
}
form .input-group-lg > * {
  height: 44px;
}
form .input-group-lg > *.add-on, form .input-group-lg > *.add-on-active {
  min-width: 44px;
}
Inoltre cancellando il secondo input dal codice o cambiandone l'attributo type (anche se non ho assegnato nessuno stile in base a questo) html il problema non si presenta.