CSS horizontal dropdown menu

Question

I have a problem with a CSS dropdown horizontal menu. Can you help me with this?

HTML:

<div id="menucontainer" align="center">
    <div id="menubar" align="center">
        <ul class="mainnav">
            <li><a href="index.html">Home</a></li>
            <li><a href="courses.html">Courses</a>
                <ul class="submenu">
                    <ul class="column">
                        <li><a href="business.html">Business</a></li>
                        <li><a href="acca.html">• ACCA</a></li>
                        <li><a href="cat.html">• Certified Accounting Technician</a></li>
                    </ul>
                    <ul class="column">
                        <li><a href="english.html">English</a></li>
                        <li><a href="generalenglish.html">• General English</a></li>
                        <li><a href="camexenglish.html">• Cambridge Exam English</a></li>
                    </ul>
                    <ul class="column">
                        <li><a href="computing.html">Computing</a></li>
                    </ul>
                </ul>
            </li>
          <li><a href="facilities.html">Facilities</a>
                <ul class="submenu">
                    <li><a href="studyarea.html">Study Area</a></li>
                    <li><a href="itlab.html">IT Lab</a></li>
                </ul>
            </li>
      <li><a href="services.html">Services</a>
                <ul class="submenu">
                    <li><a href="airportpickup.html">Airport Pickup</a></li>
                    <li><a href="firstday.html">First Day Orientation</a></li>
                </ul>
            </li>
<li><a href="international.html">International</a>
                <ul class="submenu">
                    <li><a href="aboutuk.html">About UK</a></li>
                    <li><a href="aboutlondon.html">About London</a></li>
                </ul>
            </li>
<li><a href="admissions.html">Admissions</a>
                <ul class="submenu">
                    <li><a href="entryreq.html">Entry Requirements</a></li>
                    <li><a href="howtoapply.html">How to Apply</a></li>
                </ul>
            </li>
<li><a href="aboutus.html">About us</a>
                <ul class="submenu">
                    <li><a href="messagefrom.html">Message from the Principal</a></li>
                    <li><a href="whychoose.html">Why Choose</a></li>
                </ul>
            </li>
<li><a href="contactus.html">Contact us</a>
                <ul class="submenu">
                    <li><a href="byemail.html">By Email</a></li>
                    <li><a href="byphoneorfax.html">By Phone or Fax</a></li>
                </ul>
          </li>
      </ul>
    </div>
</div>

CSS

/* 2nd container */
#menucontainer { width:100%; height:54px; background-color:#872e26; }

#menubar { width:950px; height:54px; }

#headerx { width:100%; height:5px; background:#872e26; background-image:url(../images/footerx.png); background-position:center; background-repeat:no-repeat; }
/* 2nd container end */

/* drop menu */
.mainnav { list-style-type:none; padding:0; margin:0; text-align:center; }

.mainnav li { float:left; width:118.75px; }

.mainnav a { text-decoration:none; color:#fff; display:block; line-height:54px; }

.mainnav a:hover { background-color:#e3c153; color:#872e26; }

.submenu { display:none; list-style-type:none; padding:0; margin:0; background-color:#872e26; position:absolute; float:none; font-size:10px; }

li:hover .submenu { display:block; }

.column { list-style-type:none; text-align:center; }
/* drop menu end*/

http://jsfiddle.net/r8Rc9/11/

1. I would like that the elements from the dropdown to be one on top of the other, NOT like they are now, one next to the other.
2. Also, the submenu inherits the size from the navigation. Can I define less line-height for submenu only?

Tried everything and I do not seem to find the fault.

Answer 1

Add position: relative to the parent li elements:

.mainnav li {
    float: left;
    display: block;
    width: 118.75px;
    position: relative;
}

Then add position:absolute to the child .submenu element. This absolutely positions the elements relative to the parent element.

li:hover .submenu {
    display: block;
    position: absolute;
}

If you want to change the line-height of the child li elements, you could use the direct sibling combinator, > to target the direct children of the descendant li elements:

.column > li a {
    line-height: 30px;
}

UPDATED EXAMPLE HERE