Drop down CSS Menu items appearing horizontally?

Question

I'm having some trouble with CSS (to which I am fairly new) - hoping someone can give some advice after my various internet searches have proven fruitless.

My problem is that I have CSS Menu and I have recently changed the width of the main menu element but am stuggling to resize the drop-down child elements to reflect this new size - the sub-menu items are now also appearing next to each other rather than beneath each other.

Any help is appreciated!

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 is inherited on submenu items. You should clear your float for submenu:

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

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

Answer 2

Your float and width properities are being carried down to your sub menu list items. Add the following CSS:

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

Answer 3

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

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