Drop-down menu solution?

[Sanehouse]

Hello. I'm trying to make a drop-down menu based on a hierarchical unordered list system.

This is the code I tried to modify (so that it would work with my code):

Code: Select all

#navigation ul {
    position: absolute;
    top: 101px;
}
#navigation {
    width: 100%;
    background: #eee;
    float: left;
}
#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}
#navigation a, #navigation h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    margin: 0;
    padding: 2px 3px;
}
#navigation h2 {
    color: #fff;
    background: #000;
    text-transform: uppercase;
}
#navigation a {
    height: 25px;
    color: #000;
    background: #9F9F9F;
    text-decoration: none;
}
#navigation a:hover {
    color: #a00;
    background: #fff;
}
#navigation li {
    position: relative;
    margin: 0;
}
#navigation ul ul {
    position: absolute;
    z-index: 500;
    top: 23px;
    width: 200px;
}
#navigation ul ul li {
    width: 100%;
    border: 1px solid #000000;
    margin: 0;
    padding: 0;
}
#navigation ul ul ul {
    top: 0;
    left: 100%;
}
div#navigation ul ul, div#navigation ul li:hover ul ul, div#navigation ul ul li:hover ul ul {
    display: none;
}
div#navigation ul li:hover ul, div#navigation ul ul li:hover ul, div#navigation ul ul ul li:hover ul {
    display: block;
}
<!--[if IE]>
    <style type="text/css" media="screen">
    body {
        behavior: url(csshover.htc);
        font-size: 100%;
    }
    #navigation ul li {
        float: left;
        list-style: none;
    }
    #navigation ul li a {
        height: 1%;
    } 
    #navigation a, #navigation h2 {
        font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    }
    </style>
<![endif]-->

This is all the CSS I have for #navigation:

Code: Select all

#navigation {
    height: 15px;
    background: url(images/nav.png) no-repeat;
}
#navigation ul li {
    float: left;
    list-style: none;
    margin-right: 3px;
}
#navigation ul li a {
    display: block;
    width: 100px;
    padding-top: 15px;
    overflow: hidden !important;
}
#navigation ul .navigation a {
    background: url(images/navigation.png) no-repeat;
}
#navigation ul .bof1 a {
    background: url(images/bof1.png) no-repeat;
}
#navigation ul .bof2 a {
    background: url(images/bof2.png) no-repeat;
}
#navigation ul .bof3 a {
    background: url(images/bof3.png) no-repeat;
}
#navigation ul .bof4 a {
    background: url(images/bof4.png) no-repeat;
}
#navigation ul .bof5 a {
    background: url(images/bof5.png) no-repeat;
}
#navigation ul li ul li {
    display: none;
    width: 200px;
    clear: both;
}
#navigation ul.bof1:hover ul .bof1menu {
    display: block;
    width: 200px;
}

This is my unordered list:

Code: Select all

                <ul>
                    <li class="navigation"><a href="#"></a></li>
                    <li class="bof1"><a href="#"></a></li>
                    <li class="bof2"><a href="#"></a></li>
                    <li class="bof3"><a href="#"></a></li>
                    <li class="bof4"><a href="#"></a></li>
                    <li class="bof5"><a href="#"></a></li>
                </ul>

Anyone know how I can get a drop-down menu to work?

[spinal007]

http://www.htmldog.com/articles/suckerfish/dropdowns/

[moojoo]

Not sure suckerfish is the correct solution, as this can be done without the scripting with CSS and .htc file for IE.

Looking at your menu code you have no nested UL so the CSS you wrote can't target anything.

Code: Select all

<div id="nav">
<ul>
<li class="navigation"><a href=""></a>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 3</a></li>
<li><a href="">Menu Item 4</a></li>
</ul>
</div>

Basic CSS:

Code: Select all

#nav ul li ul {
display:none;
}

#nav ul li:hover ul {
display:block;
width:200px;
position:absolute;
left:auto
}

Thats the basics. See if that helps set you on the right track. Also get Whatever:hover for to make it work in IE. the whatever hover htc is well documented and simple to implement.

[spinal007]

Good reply moojoo, but I can't see how your suggestion differs from suckerfish.

[moojoo]

Suckerfish requires javascript which scrubs the source and uses js to manipulate elements. Also utilizing a conditional comment is a better solution than using js browser sniffing as well, which suckerfish also handles via js. At any rate the solution I provided is probably easier and more direct than suckerfish is as well. Not that suckerfish is not a good solution, just think in this case it may be over kill.

[aso186]

.htc is still a scripting file, and will not take effect if the user has Javascript disabled.

[spinal007]

Popup menus cannot be achieved without any javascript because IE6 does not handle anything:hover. As aso186 said, if javascript is disabled, suckerfish or not, popup menus will not work in IE6. So why the js-phobia?

[bonnit]

cant offer direct help but http://www.cssplay.co.uk have loads of this type of menu, might be worthwhile checking it out?

[dancave]

I'll vouch for CSS play's quaility. I've used there stuff a number of times.

All they request is a link back for personal sites or an email to request permission on larger sites.

http://www.cssplay.co.uk/menus/dd_valid.html

The above link is a Cross browser CSS only DD menu.

Hope this helps

[moojoo]

Originally Posted by aso186

.htc is still a scripting file, and will not take effect if the user has Javascript disabled.

Aso yes, but the htc method is a tad less obtrusive than suckerfish imo. Either way the end result is the same I guess. The menu should function with or without either, and sub links available on sub pages in some form. Simple enough in some no script tags or conditional depending on what you are using.

[bobby12]

Because the drop down menus are written Javascript the links created in the drop down menu are not relative and are therefore not updated when used on an actual page. This is important because the template is stored in a sub folder called template and not with the other HTML pages so the links are always wrong.