Выпадающие элементы меню CSS отображаются горизонтально?

Question

У меня проблемы с CSS (к которым я довольно новичок) - надеясь, что кто-то может дать некоторые советы после того, как мои различные интернет-поиски оказались бесплодными.

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

Любая помощь приветствуется!

JSFiddle: https://jsfiddle.net/anwwgyu8/

CSS:

#wrap2 { 
    width: 70%; 
    height: 75px; 
    margin: 0; 
    position: absolute; 
    top: 2190px; 
    background-color: #2A79BF; 
    left: 15%; 
} 

.buttonbar1 { 
    height: 75px; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    border-right: 1px solid #2A79BF; 
    left: 0%; 
    width: 100%; 
} 

.buttonbar1 li { 
    height: 75px; 
    width: 25%; 
    float: left; 
    text-align: center; 
    list-style: none; 
    font: normal bold 12px/1.2em Arial, Verdana, Helvetica; 
    padding: 0; 
    margin: 0; 
    background-color: #2A79BF; 
} 

.buttonbar1 a { 
    padding: 25px 0; 
    border-left: 1px solid #FFFFFF; 
    border-right: 1px solid #FFFFFF; 
    text-decoration: none; 
    color: white; 
    height: 25px; 
    display: block; 
} 

.buttonbar1 a:hover { 
    color: #E0F0FFC 
} 

.buttonbar1 li ul { 
    display: none; 
    height: auto; 
    margin: 0; 
    padding: 0; 
} 

.buttonbar1 li:hover ul { 
    display: block; 
    color: #E0F0FF 
} 

.buttonbar1 li ul li { 
    background-color: #2A79BF; 
    color: #E0F0FF 
} 

.buttonbar1 li ul li a { 
    border-left: 1px solid #1f5065; 
    border-right: 1px solid #1f5065; 
    border-top: 1px solid #74a3b7; 
    border-bottom: 1px solid #1f5065; 
} 

.buttonbar1 li ul li a { 
    border-left: 1px solid #1f5065; 
    border-right: 1px solid #1f5065; 
    border-top: 1px solid #74a3b7; 
    border-bottom: 1px solid #1f5065; 
} 

.buttonbar1 li ul li a:hover { 
    background-color: #2A79BF; 
    color: #E0F0FF 
} 

Answer 1

Float наследуется по пунктам подменю. Вы должны очистить поплавок для подменю:

.buttonbar1 li ul li { 
    /* ... */ 
    float: none; 
    width: 100%; 
} 

https://jsfiddle.net/anwwgyu8/11/

Answer 2

.buttonbar1 li ul li{ 
width:100%; 
} 

Fiddle: https://jsfiddle.net/anwwgyu8/6/

Answer 3

Ваш поплавок и ширина properities осуществляются до вашего суб список меню пунктов. Добавьте следующий CSS:

.buttonbar1 li ul li { 
    display:block; 
    float:none; 
    width:100%; 
}