Dropout Menu

Not really developing this site, just wanting to show a dropout/dropdown menu.

Just not sure best way to do it, did some looking around and theres free generators with a ton of markup, so was wondering if there is a simple way to create a pure css menu without a bunch of markup…

Here is what I got going on, as you can see most of it is images as its just me practicing to create dropout menus…

http://modocom.ca/twincity

As you will see in the list there is Coffee and Coffee K-Cups these would be a submenu of Refreshments.

Here is a pic of what I vision it looking like…

http://modocom.ca/twincity/dropdown.html

If someone could guide me along the correct path to achieve this with just CSS that would be great.

Thanks,

Mike

I got a bit further, for some reason even though I have display:block it doesnt make the whole 200px of the li clickable which is frustrating.

I think I’m on the right path, just need to figure out how to do the dropout thing and to bring up the rest of the main ul li items up instead of being at the bottom.

Thanks,

Mike

The first problem I can see is that you’ve closed the </li> after Refreshments … that is wrong. The sub-menu has to be contained within the <li> that it appears under (or beside), so you need to move that </li> to after the closing </ul> of the submenu.

To make the whole line clickable, you need to set
#left-nav a {display:block;}
That will make the link bit take up the full width (normally, <a> is an inline element, which means it is only as big as it needs to be to enclose its contents).

Thank you for that :slight_smile:

Now getting more further!

Now just to get it so it only appears when you hover over Refreshments and to lineup the submenu with top op Refreshments :slight_smile:

/* edit got the submenu lined up by using the margin-top: -33px; Hope that is correct unless theres a more sufficient way.

Thanks,

Mike

Hmmm having trouble with the hiding the submenu and then showing it when they role over the parent menu lol

having trouble with the hiding the submenu and then showing it
Hi,
You need to set the sub-ul as position:absolute; to remove it from the page flow. That will keep it from pushing other elements around when it is revealed.

To hide the submenu simply pull it off screen with a negative margin. Then you set that margin to zero onli:hover ul to reveal it.

Here is an example of a Vertical Flyout Menu.

That one has all the IE6/7 fixes in place and it has always been pretty stable for me. You can use it as a reference if you need to support IE6.

Going by your sample image, I came up with this as a starting point for your menu. I am actually using two main ULs for the purpose of setting that shadowed background image on the bottom UL.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
.nav, .nav ul {
    float: left;
    clear:left;
    width: 200px;
    margin: 0;
    padding: 0 0 30px 0;
    list-style: none;
    background: #E4E4E4;    
}
.nav li {
    position: relative;
    font: bold 14px/1.2 arial,helvetica,sans-serif;
}
.nav li h3 {
    margin:0;
    padding: 8px 15px;
    background: #D3D3D3;
}
.nav a {
    display: block;
    width: 170px;/*haslayout IE*/
    padding: 10px 15px;
    color: #000;
    text-decoration: none;
    font-size:12px;
}
.nav a:hover {
    color: blue;
    background:#DDD;
}
.nav ul {
    position: absolute;
    top:0;
    left:100%;
    margin-left: -999em; /*hide sub nav*/
    padding: 0 0 10px 0;
    background: #C1D82F;
}
.nav li:hover ul {margin-left:0}/*show sub nav*/

.nav li:hover li a:hover {
    color:#000;
    background:#C1C82F;
} 
</style>

</head>
<body>

<ul class="nav">
    <li><h3>Browse Products</h3></li>    
    <li><a href="#">Refreshments</a>
        <ul>
            <li><a href="#">Coffee</a></li>
            <li><a href="#">Coffee K-Cups</a></li>
            <li><a href="#">Coffee Beans</a></li>
            <li><a href="#">In Room Coffee</a></li>
            <li><a href="#">Cappuccino</a></li>
            <li><a href="#">Espresso</a></li>
            <li><a href="#">Hot Chocolate</a></li>
            <li><a href="#">Tea</a></li>
            <li><a href="#">Iced Tea</a></li>
            <li><a href="#">Organic</a></li>
        </ul>
    </li>
    <li><a href="#">Snacks &amp; Confectionary</a></li>
    <li><a href="#">Cleaning Supplies</a></li>
    <li><a href="#">Vending</a></li>
    <li><a href="#">Food Packaging</a></li>
    <li><a href="#">Health &amp; Beauty</a></li>
    <li><a href="#">Equipment</a></li>
</ul>
<ul class="nav">    
    <li><h3>Featured Brands</h3></li>
    <li><a href="#">Keurig</a></li>
    <li><a href="#">Mother Parkers</a></li>
    <li><a href="#">Higgins &amp; Burke</a></li>
    <li><a href="#">Numi Tea</a></li>
    <li><a href="#">Canterbury</a></li>
    <li><a href="#">Brown Gold</a></li>
    <li><a href="#">IIIy</a></li>
    <li><a href="#">Martison Coffee</a></li>
</ul>

</body>
</html>

I am actually using two main ULs for the purpose of setting that shadowed background image on the bottom UL.
I could have done it all in one parent ul but it gives extra styling options when using a main ul for each heading. It also allows the first list-item to become the container for each heading. I am using h3s but that would depend on your page outline as to whether or not it is appropriate.

Taking that code I posted above a little further along we can get much closer to your desired results.

Flyout Suckerfish Menu

CSS is embedded so just view page source for complete code.

Hope that helps :wink: