(The site menu above has replaced the one described below.)

Horizontal Menu Done with modified <ul>

To make CSS styled horizontal drop down menus, tutorials commonly use unordered list tags for the menu, manipulating the list elements to appear side-by-side in addition to the background and padding which highlight the menu items. CSS styles are applied to all <ul> tags.

The problem with that approach is that routine unordered lists no longer work. Some of us like using unordered lists on our web pages. The menu code needs additional work.

Good news. It appears that we can do horizontal CSS menus and keep using both regular ordered and unordered lists if we can figure out how to make class definitions to limit menu styles to a specific menu-only class of unordered lists. What you see on this page is my attempt.

The menu begins the body of the page. I could not get the CSS "clear:both" statement to work and have put three <br> tags right after the menu to clear the heading below the menu. Without the break tags, any text/image would be (partly) hidden by the menu. The break tags are a workaround.

This item is in a normal unordered list.
another item

This is in a regular ordered list.
another item

The styling code below is a modification of the original found at: basoftwareconsulting.com.

UPDATE: (2017-12-28) - After a year and a half of using this menu technique in production, a visitor commented that the menu was difficult to use because the dropdown shifted to the right as it widened to accommodate the submenus. I didn't like it either, but had no clue how to fix it. It turned out to be a CSS issue which was solved by adding this: margin-left:-40px; to overcome the normal indent handling of a normal line item element. The menu now drops straight down instead of jumping to the right by 40 pixels.


/*Make dropdown links vertical*/
li.menu ul li {
    display: block;
    float: none;
    margin-left:-40px; /* fixes jumping menu dropdowns - 2017-12-28 */
}


<style>
/*Strip the ul of padding and list styling*/
ul.menu {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}
/*Create a horizontal list with spacing*/
li.menu {
    display:inline-block;
    float: left;
    margin-right: 1px;
}
/*Style for menu links*/
li.menu a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}
/*Hover state for top level links*/
li.menu:hover a {
    background: #19c589;
}
/*Style for dropdown links*/
li.menu:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}
/*Hover state for dropdown links*/
li.menu:hover ul a:hover {
    background: #19c589;
    color: #fff;
}
/*Hide dropdown links until they are needed*/
li.menu ul {
display: none;
}
/*Make dropdown links vertical*/
li.menu ul li {
    display: block;
    float: none;
    margin-left:-40px; /* fixes jumping menu dropdowns - 2017-12-28 */
}
/*Prevent text wrapping*/
li.menu ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
    text-align:left;
}
/*Display the dropdown on hover*/
ul.menu li a:hover + .hidden, .hidden:hover {
    display: block;
}

</style>

The following menu code is at the top of the body section of the page. The key component is the use of the class "menu" in each menu element. o


<ul class="menu" id="mainmenu">
      <li class="menu"><a href="#">Home</a></li>
      <li class="menu">
        <a href="#">About ↓</a>
        <ul class="hidden">
                <li class="menu"><a href="http://runelab.org/about.html">Who We Are</a></li>
            <li class="menu"><a href="#">What We Do</a></li>
        </ul>
     </li>
     <li class="menu">
        <a href="#">Portfolio ↓</a>
        <ul class="hidden">
            <li class="menu"><a href="#">Photography</a></li>
            <li class="menu"><a href="#">Web & User Interface Design</a></li>
            <li class="menu"><a href="#">Illustration</a></li>
        </ul>
     </li>
        <li class="menu"><a href="#">News</a></li>
        <li class="menu"><a href="#">Contact</a></li>
    </ul>