Creating a dropdown menu

Question

I have a menu that contains a submenu which gets displayed below the main menu when a link inside the main menu is hovered over. What I want to do is add a second submenu inside the first submenu but make it a dropdown. I am not that great at css and I was wondering if anyone can help me with this. I haved followed some tutorials online and I was not able to get the results I was looking for. Here is the html and css I have so far.

<div id="navigation">
<ul id="mymenu">
    <li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(2)">Gallery</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(3)">What We Do</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(4)">Contact</a></li>
</ul>
</div>
<div id="sublinks">
<ul id="s1">
    <li><a href="#">General</a></li>
    <li><a href="#">Landon News</a></li>
    <li><a href="#">Trust Us</a></li>
</ul>
<ul id="s2">
    <li>
        <a href="#">Security Systems</a>
        <ul id="s2sys">
            <li><a href="#">Arlington HA</a></li>
            <li><a href="#">Enfield HA</a></li>
            <li><a href="#">Revere HA</a></li>
        </ul>
    </li>
    <li>
        <a href="#">WLAN Systems</a>
        <ul id="s2wlan">
            <li><a href="#">Beverly HA</a></li>
            <li><a href="#">Holyoke HA</a></li>
            <li><a href="#">Meriden HA</a></li>
            <li><a href="#">Revere HA</a></li>
        </ul>
    </li>
</ul>
<ul id="s3">
    <li><a href="#">Computers</a></li>
    <li><a href="#">Strategic Planning</a></li>
    <li><a href="#">Security Systems</a></li>
    <li><a href="#">WLAN, WiFi Broadband</a></li>
</ul>
<ul id="s4">
    <li><a href="#">Email</a></li>
    <li><a href="#">Address Info</a></li>
</ul>
</div>

Here is the javascript for the main menu which will display the first submenu

function showsubmenu(id){
    submenu = document.getElementById('s'+id);
    for(i=1;i<=4;i++){
        if(i==id){
            submenu.style.display="block";
        } else {
            document.getElementById('s'+i).style.display="none";
        }
    }
}
sfHover = function() {
var sfEls = document.getElementById("sublinks").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
        this.className+=" hover";
    }
    sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(" hover\\b"), "");
    }
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Here is the CSS

#navigation{
    height:32px;
    margin:0 auto;
    width:auto;
}
#navigation ul{
    height:32px;
    line-height:32px;
}
#navigation ul li{
    display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
    padding:0 20px;
    display:block;
    text-decoration:none;
    float:left;
    color:#1361A5;
    font-weight:bold;
    text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
    color:#C3C2C1;
}
/* ----------- Sub Menu ----------- */
#sublinks{
    width:auto;
    margin:0 auto;
    background:#C3C2C1;
    height:30px;
    font-size:11px;
    border-radius:8px;
    -moz-border-radius:8px; /* Firefox 3.6 and earlier */
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    -moz-box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    behavior: url(http://localhost/landon/assets/pie/PIE.php);
    position: relative;
}
#sublinks ul{
    height:32px;
    line-height:31px;
}
#sublinks ul li{
    display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
    padding:0 10px;
    display:block;
    text-decoration:none;
    float:left;
    color:#FFFFFF;
}
#sublinks ul li a:hover{
    text-decoration:underline;
}
#sublinks li:hover ul{
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}
#sublinks li:hover li {
    float: none; 
}
#sublinks li:hover li a {
    background-color: #C3C2C1;
    border-bottom: 1px solid #fff;
    color: #000; 
    left:50;
}
#sublinks li li a:hover {
    background-color: #8db3ff; 
}

/* ----------- Hide Sub menu ----------- */
#s2, #s3, #s2sys, #s2wlan{display:none;}

What I am trying to do is make the second submenu a dropdown from the first submenu and at the moment it displays within the same line and not as a dropdown. How can I do this?

Could you please create a JsFiddle

Aymeric
– Aymeric

2012-09-14 14:48:46 +00:00
Commented Sep 14, 2012 at 14:48 — Aymeric
– Aymeric, Commented Sep 14, 2012 at 14:48
Fiddle: jsfiddle.net/Hxduu/1

worenga
– worenga

2012-09-14 14:55:40 +00:00
Commented Sep 14, 2012 at 14:55 — worenga
– worenga, Commented Sep 14, 2012 at 14:55
Here is the link for JsFiddle: jsfiddle.net/4k2Tx/

Raymond Feliciano
– Raymond Feliciano

2012-09-14 15:00:46 +00:00
Commented Sep 14, 2012 at 15:00 — Raymond Feliciano
– Raymond Feliciano, Commented Sep 14, 2012 at 15:00

Arianne · Accepted Answer · 2012-09-14 15:13:59Z

1

http://jsfiddle.net/kVztG/1/

To make the sub-sub-menu a dropdown change the css below.

#sublinks li:hover li {
    display:block;
    position:relative;
    top:30px;
}

The position:relative and top:30px stop the dropdowns from appearing ontop of the sub-menu, and display:block stops the li from display inline.

answered Sep 14, 2012 at 15:13

Arianne

4972 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JDandChips · Accepted Answer · 2012-09-14 15:10:27Z

1

Try adding this css to your drop down ul list that is within your sub-menu.

position: absolute;
top: 30px;

Depending on the type of result your looking for, you might want to amend the top value, or have the dropdown vertical by adding a width

Demo: http://jsfiddle.net/4k2Tx/2/

answered Sep 14, 2012 at 15:10

JDandChips

10.2k3 gold badges34 silver badges46 bronze badges

1 Comment

Raymond Feliciano Over a year ago

Thanks guys both answers worked like a charm. I appreciate all your help. Too bad I cant vote for both answers

Collectives™ on Stack Overflow

Creating a dropdown menu

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related