Є два способи вибудувати два елементи один за одним:
display: inline; Але насправді краще display: inline-block; необхідну "строчность" елемента ви отримаєте, але так само залишаться і деякі особливості блочности: можливість задавати ширину, педдінгі і т.д.
float: left; Звичайне обтікання. Цей спосіб мені подобатися більше. Будь обтічний елемент робиться блоковим. Між блоковими елементами не народжуються прогалини. Хоча б з цього я знаходжу його більш доречним. Але у обтікання більше особливостей. Наприклад те, що обтікання треба скидати. Робиться це властивість clear: both; (Відразу і ліве і праве обтікання). Тег з такою властивістю повинен йти після останнього обтічного елемента. Щоб не засмічувати HTML зайвими тегами, рекоменду додати в код клас clearfix (дивіться код) і просто додавати його батьківського оберточнуму тегу. За допомогою псевдокласів before і after додаються потрібні елементи зі скиданням обтікання.
Перший і останній елементи зовсім не потрібно уніфікувати в html. Ви можете використовувати псевдокласи CSS:
Округляти кути спробуйте за допомогою властивості border-radius.
Самим елементів li додайте ширину в 20%.
Посилання всередині елементів зробіть блоковими (display: block), щоб вони зайняли всю ширину елемента.
2) Рекомендую для меню навігації використовувати ul / li. А для меню дій використовувати menu / li. Навігаційного меню прийнято виставляти клас .nav або .navigation.
3) Коли ви розкидає кілька компонентів, типу li, з вмістом img, то все, що стосується розмітки, наприклад margin або розміри, застосовуйте до li.
4) Фон пропав бо не скинули набрякання. Додайте обгорткового тегу кмпонентов меню клас clearfix.
5) Якщо самі меню ви розкидає за допомогою обтікання то їх обгортці (background) так само додайте цей clearfix.
6) І побільше логіки в коді. Пишіть селектори один за одним, за смисловим порядку.