Creating dropdown menu
-
Hello!
I have managed to create a dropdown menu based on the theme Unsleepable (http://www.openswitch.org/2006/04/16/unsleepable/) and Son of Suckerfish for WP (http://www.invokemedia.com/css-dropdown-menu-with-wordpress.html).
My problem is that all the submenu items get the same height as the buttons on the top in the theme (about, contact, links etc.). How can this be fixed? Except from this, the menu seems to work fine.
Code:
header.php:
between <head></head>:
<script language=”javascript” type=”text/javascript” >
sfHover = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (i in sfEls){
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);
</script>in <body>:
<ul id=”toolbar”>
<?php wp_list_pages(‘sort_column=menu_order’); ?>style.css:
/*menu */
#nav {
margin-left: 0px;
list-style: none;
padding: 0;
border: 1px solid #fff;
border-width: 0px 0px 0px 1px;
}
#nav ul {
margin: 0;
padding: 0;
height: 1em;
}
#toolbar form {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
text-transform: lowercase;}
#toolbar input {
margin: 1px;
}
#nav a {
display: block;
width: 7em;
text-align: center;
height: 20px;
line-height: 50px;
padding: 50px 0 0;color: #fff;
text-decoration: none;}
#nav li {
float: left;
width: 7em;
border-right: 1px solid #555;padding: 0;
background: #333333;}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 12.9em;
font-weight: normal;
border: 1px solid #fff;
margin: 0;
list-style: none;
}
#nav li li {
padding-right: 1em;
width: 13.4em;
border: 0px;
}
#nav li ul a {
width: 12em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #7e2e37;
}
/* end menu */
Thanks in advance ! 😀
The topic ‘Creating dropdown menu’ is closed to new replies.