Over two years ago I created a css menu. Now my services are growing a little i need the menu to be drop down. but I am unsure how to do this. Can someone point me in the right direction with this. please bear in mind it is some time since I did css - I was bad then and even rustier now.
Here’s a simple example showing a method that will work, give the li elements position relative and use absolute positioning to show / hide the sub menus.
You just have to add this CSS after line number 55 in style.css
.menu ul {
background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat-y;
position: absolute;
padding: 0;
margin: 0;
left: 15px;
top: -9999px;
}
.menu ul li {
display: block;
}
.menu > li:hover ul {
top: 100%;
}
and open up a new ul li wherever you want submenus before the <li> for the parent menu closes. Like this:
<li><a href="http://www.web-writer-articles.co.uk/webcontentservices.php">Web Writer</a>
<!--add your submenu items here -->
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
<!--submenu item addition end -->
</li>
That’s all.
Basically, what markbrown4’s solution is doing is keeping the submenu ul out of the screen by absolutely positioning it and giving ‘top: -9999px’ and then putting it back to screen on hover by top: 100%.
Also, the submenu li is made ‘display:block’ so that it displays vertically as opposed to horizontally, and the parent menu li is given a ‘position:relative’ so that the submenu ul is positioned according to the parent menu position.
this is really great. and thanks for the explanation too -its making sense now.
There are to problems I have and i wonder if there is anything I can do about this.
the drop menu overlaps the main menu slightly when it appears. Is there any way it can be aligned do that it appears exactly below it?
when I add text that is too long for the graphic it creates another graphic below it with the extra text below -as if it was another link. I take it really I just need to lengthen the original graphic a little to take into account the longest titles?
Put a ‘margin-top:6px;’ in .menu ul (maybe line 59) and then a ‘padding-bottom:6px;’ in ul.menu a (line 44). Padding bottom is put to increase the hover area of the link. Otherwise it would close before one could navigate to sub menus.
Let me figure out the second one and get back to you.
its been a bit of time since i was helped out with this menu issue. due to other projects I was unable to put it into action. Now six months later I have and found an issue.
The drop menu is created under the main menu (under “Web Content”) but it only flashes on and off. It does not allow the user to move the cursor over the different bars.
I’m unable to access your site at the moment, but I tested those styles and they were meant to look exactly as you had the menu before. Perhaps just refresh your browser/clear your cache to make sure to flush out the old styles.
The reason you can’t use margin-top is that it creates a space between the top level LI and the drop menu, and while your cursor is hovering over that space, the drop menu will disappear. So I put padding on the LI and its <a> as an alternative to push the drop menu down the same distance. As I say, it worked nicely for me in testing, so there could be some old cached styles getting in the way, or I need to test it in other browsers.
Edit:
OK, I finally managed to access your site, but the new styles aren’t in place yet, so I can’t check how the styles work in various browsers.
I’d like to suggest a slightly different angle if Ralph’s doesn’t pan out.
Based on the currently posted testmenu.css file:
ul.menu > li {
[COLOR="#0000FF"]display:inline-block;[/COLOR] /* was inline */
position:relative;
}
.menu ul {
background:url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
position: absolute;
padding: 0;
[COLOR="#FF0000"][s]margin-top:6px;[/s][/COLOR] /* not needed */
}
.menu > li:hover ul {
top: 100%;
color:#FFFFFF;
[COLOR="#FF0000"][s]padding-bottom:6px;[/s][/COLOR] /* not needed */
}
The bottom list item in the dropdown menu looks a little short in IE8. Don’t know why. FF looks good.
It’s late and my cats want me to go to bed. Cheers.
