CSS: выравнивание при перемещении

Question

У меня есть несколько кнопок навигации по страницам + раскрывающийся список, который я пытаюсь отобразить рядом, но они не взаимодействуют друг с другом.

Оба элемента должны перемещаться вправо.Скрипка: http://jsfiddle.net/u9dBm/1/

Что не так:

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

Почему два объекта играют глупых пиджаков со своим ростом?

Не имеет отношения к проблеме, но что-то мне интересно ... Почему, когда я ставлю SPAN содержащий выпадающее ПОСЛЕ страниц первой, он отображается слева?Логически (или, по крайней мере, мой), поскольку он находится в коде ПОСЛЕ этого, а не до, он должен отображаться после?

Answer 1

Я бы не стал использовать float для этого. Я сделал некоторые изменения в вашем коде, дайте мне знать, что вы думаете: http://jsfiddle.net/Wexcode/g2Z5k/

Answer 2

Я возился с некоторым относительным позиционированием, и я получил это: http://jsfiddle.net/u9dBm/6/ Я добавил

 position: relative;
 top: -6px;

до конца .dropdown> li, чтобы он выглядел на 6 пикселей выше, чем предполагалось. Я не могу сказать вам, почему он рендерился там внизу, но я могу дать вам дерьмовое исправление.

Кстати, мне очень понравилась демоверсия.