Turning css menu into drop down

[cass27]

Hi,

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.

The drop down would need to be under web writer.

www.web-writer-articles.co.uk


the css is as follows:

/* CSS Document */
/* to get the secondaryNav the same as the main nav width you need to find out what 23% (it was 23% instead of 25% to give 2% gutter) of the content area is. You do this by dividing 23 by 75 and then multiplying by 100. For padding add in %. this may have to be a guess at first, but what ever you add in padding take away in overall width in %*/
html,body{
margin:0;
padding:0;
}
body{
background-color: #D7DFD8;
padding:15px 0;
}

#wrapper{
width:98%;
margin:0 auto;
border:ridge thick #666666;
max-width:1150px;
min-width:800px;}

#header{
float:left;
width:100%;

background-color:#FFFFFF;
}


#headleft{float:left; width:49%; }
#headright{float:left; width:49%}
/*--------------------------------------------menu------------------------------------------*/
ul.menu {
    clear:both;
    margin:0 0 1px;
    padding:0 2%;
    list-style:none;
    line-height:28px;
    background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
}
ul.menu li {
    display:inline;
}
ul.menu a {
    text-decoration:none;
    line-height:28px;
    font-size:93%;
    color: #fff;
    outline:0;
    font-weight:bold;
    padding:0 20px;
}
ul.menu a:hover {
    color:#FFFF00;
}
/*---------------------------------------end menu------------------------------------------*/

#mainContent{
float:left;
width:1000px;
background-color:#ffffff;
}





.dept{float:left; width:33%; background-color:#ffffff; }
.intro{float:left; background-color:#ffffff; margin-top:10px; }
.service{float:left; background-color:#ffffff; margin-top:10px;}

#footer{
clear:both;
background: #666666;
}

/*------------------------------------------pages-----------------------------------------*/
#mainNav{
float:left;
width:15%;
background-color:#99CC66;
}

#content{
float:left;
width:85%;
background-color:#ffffff;
margin-bottom:20px;

}


#mainContent{
float:left;
width:65%;
background-color:#ffffff;
padding-top:30px;
padding-left:20px;
padding-right:28px;
}
.maincontent{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:3px; margin-bottom:20px;}
.maincontent1{float:left; width:95%; background-color:#ffffff; font-size:14px; color:#333333; padding:17px; margin-bottom:20px;}
.maincontent2{float:left; width:70%; background-color: #FDFEC5; color:#CEFCFF; padding:22px; margin-left:15%; margin-bottom:30px; border:medium outset #FF3300;}
.maincontent3{float:left; width:90%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin:15%; margin-bottom:10px; border:medium outset #FF3300;}
.maincontent4{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:8px; margin-bottom:20px; margin-left:20px;}
.maincontent5{float:left; width:95%; background-color:#ffffff; border:medium outset #FF3300; font-size:14px; color:#333333; padding:17px; margin-top:30px; margin-bottom:20px;}
.maincontent6{float:left; width:95%; background-color: #0099FF; font-size:16px; color:#ffffff; padding:8px; margin-bottom:20px; margin-left:20px;}
.maincontent7{float:left; width:80%; background-color:#ffffff; border:medium outset #FF3300; font-size:14px; color:#333333; padding:17px; margin-left:70px; margin-top:30px; margin-bottom:20px;}

.secondaryNav{
float:right;
width:28%;
background-color:#FFFF99;
padding-left:8px;
padding-top:30px;
}


#contactform{width: 85%; margin-left:25px; height:900px; float:left;  border:medium outset #00cc66;}


a.newlink:link{color:#ffffff; text-decoration:underline;}
a.newlink:visited{color:#ffffff;text-decoration:underline}
a.newlink:hover{ color:#FFFF00; text-decoration:underline;}

a.general:link{color:#0099CC; text-decoration:none;}
a.general:visited{color:#0099CC; text-decoration:none}
a.general:hover{ color:#0033CC; text-decoration:underline;}

.contacttext{padding:7px; color:#333333;}
#textbody{float:left; width:95%; }

And the html is as follows:

<body>
<div id="wrapper">
<div id="header"><div id="headleft"><img src="myimages/copywriter_redone.png" alt="Web writer  converts interest to sales and enhances traffic to your website" border="0" usemap="#Map4" title="web writer, web text and internet marketing. Web content at very reasonable prices. Ask me." />
<map name="Map4" id="Map4"><area shape="rect" coords="781,101,936,133" href="http://www.web-writer-articles.co.uk/contact.php" />
</map>

</div><!--headleft-->

  <ul class="menu">
            <li><a href="index.php">Home</a></li>
            <li><a href="webcontentservices.php">Web Writer</a></li>						 					
	    <li><a href="thisisme.php">About me </a></li>
            <li><a href="ghost_writer.php">Ghostwriter</a></li>
            <li><a href="http://www.web-writer-articles.co.uk/blog/"> SEO Guide</a></li>
            <li><a href="contact.php">Contact me</a></li>
    </ul>
</div><!--header-->

thanks for your help

[markbrown4]

Hi,

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
.menu {
  background: black;
  list-style: none;
  text-align: center;
}
.menu a {
  color: white;
}
.menu > li {
  display: inline;
  position: relative;
}
.menu ul {
  position: absolute;
  background: black;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 0;
  top: -9999px;
}
.menu ul li {
  display: block;
}
.menu > li:hover ul {
  top: 100%;
}
</style>
</head>
<body>
<ul class="menu clearfix">
  <li><a href="index.php">Home</a></li>
  <li><a href="webcontentservices.php">Web Writer</a>
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </li>
  <li><a href="thisisme.php">About me </a></li>
  <li><a href="ghost_writer.php">Ghostwriter</a></li>
  <li><a href="http://www.web-writer-articles.co.uk/blog/"> SEO Guide</a></li>
  <li><a href="contact.php">Contact me</a></li>
</ul>
</body>
</html>

Hope it helps,

[akrimony]

Hi Cass27,

I incorporated markbrown4's superb solution into your design. Here is the link: https://dl.dropbox.com/u/8600929/forum-help/cass27.htm

The changes have been made in HTML and style.css.

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.

Any confusion, please feel free to ask here. :-)

[cass27]

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.

1. 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?
2. 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?

thanks

[akrimony]

Hi,

The solution to your first problem:

1) 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.

[akrimony]

Hi,

the solution to your second problem:

2) remove the '-y' from 'repeat-y' in the background property inside.menu ul (line 59) and add 'white-space: nowrap;' in the same.

Post here if something doesn't work. I've updated the link with a long text: https://dl.dropbox.com/u/8600929/forum-help/cass27.htm

[cass27]

Hi,

the solution to your second problem:

2) remove the '-y' from 'repeat-y' in the background property inside.menu ul (line 59) and add 'white-space: nowrap;' in the same.

Post here if something doesn't work. I've updated the link with a long text: https://dl.dropbox.com/u/8600929/forum-help/cass27.htm

this is looking great. thanks Mark and Akrimony for your time on this. You have moved me on.

Have a great day!

[cass27]

Hi

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.

You can see this here:

http://www.web-writer-articles.co.uk/testmenu2.php

and

http://www.web-writer-articles.co.uk/testmenu.css

Can anyone tell me why this is not working properly?

thank you

[ralph.m]

Try removing the line in blue and add the bits in red:

.menu ul {
background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
position: absolute;
padding: 0;
margin-top: 6px;
left: 15px;
top: -9999px;
white-space: nowrap;
}

ul.menu a {
text-decoration: none;
line-height: 28px;
font-size: 93%;
color: white;
outline: 0;
font-weight: bold;
padding: 0 20px 6px;
}

ul.menu > li {
display: inline;
position: relative;
padding-bottom: 6px;
}

[cass27]

Try removing the line in blue and add the bits in red:

.menu ul {
background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
position: absolute;
padding: 0;
margin-top: 6px;
left: 15px;
top: -9999px;
white-space: nowrap;
}

ul.menu a {
text-decoration: none;
line-height: 28px;
font-size: 93%;
color: white;
outline: 0;
font-weight: bold;
padding: 0 20px 6px;
}

ul.menu > li {
display: inline;
position: relative;
padding-bottom: 6px;
}

Hi Ralph,

when i first saw your changes I thought - how can padding make the menu stay out and I was all ready to write back with a negative outcome.

But it worked! Thanks! but why?

however I need the margin -top as without it the drop-down goes up onto the parent menu.

thanks again,

Nick

[ralph.m]

I need the margin -top as without it the drop-down goes up onto the parent menu.

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.

[cass27]

Hi Ralph,

I have left the margin-top in for the moment for youi to see. I use chrome a lot and it is perfect in chrome but overlaps in IE. Any ideas?

thanks,

Nick

[ralph.m]

Any ideas?

You haven't followed my suggestion of also putting padding on the top level <li>, which should fix it:

ul.menu > li {
display: inline;
position: relative;
padding-bottom: 6px;
}

Of course, remove the top margin of 6px on the sub ul, too.

[ronpat]

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 {
    display:inline-block;        /* was inline */
    position:relative;
}

.menu ul {
    background:url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
    position: absolute;
    padding: 0;
    margin-top:6px;          /* not needed */
}

.menu > li:hover ul {
    top: 100%;
    color:#FFFFFF;
    padding-bottom:6px;     /* 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.

[cass27]

You haven't followed my suggestion of also putting padding on the top level <li>, which should fix it:

ul.menu > li {
display: inline;
position: relative;
padding-bottom: 6px;
}

Of course, remove the top margin of 6px on the sub ul, too.

Hi Ralph. I dod sop but it still overlapped in IE. I took a look at Ronpats idea and this seems to have worked for both chrome and IE.

Thanks for your help!

[cass27]

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 {
    display:inline-block;        /* was inline */
    position:relative;
}

.menu ul {
    background:url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
    position: absolute;
    padding: 0;
    margin-top:6px;          /* not needed */
}

.menu > li:hover ul {
    top: 100%;
    color:#FFFFFF;
    padding-bottom:6px;     /* 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.

Hi ronpat,

This idea worked just great. thanks.

Cats rule ok

[ralph.m]

Nice work, ronpat. Glad it's sorted.