Hi everyone.

 

Hope someone can help as I have been confusing myself over this for ages! I have a navigation menu that I hope to position across the top of a website that I am in the process of creating. However, I want to add a drop-down element to it, so for example the 'about us' link when hovered over will produce a drop-down menu containing other links such as 'partners' and 'location'.

 

So far I have the following CSS for the menu:

 

ul#menu{

list-style-type:none;

width:auto;

position:relative;

display:block;

height:35px;

font-size:13px;

font-weight:bold;

background:transparent url("images/OFF.gif") repeat-x top left;

font-family:Arial, Helvetica, sans-serif;

border-top-width: 1px;

border-bottom-width: 1px;

border-top-style: solid;

border-bottom-style: solid;

border-top-color: #74b0c6;

border-bottom-color: #999;

border-right-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-left-style: solid;

border-right-color: #999;

border-left-color: #999;

margin-top: 0;

margin-bottom: 0;

margin-right: 0px;

margin-left: 0px;

}

 

ul#menu li{

display:block;

float:left;

margin:0;

pading:0;

}

 

ul#menu li a{

display:block;

float:left;

color:#6d7078;

text-decoration:none;

font-weight:bold;

padding:12px 20px 0 20px;

height:23px;

background:transparent url("images/DIVIDER.gif") no-repeat top right;

}

 

 

ul#menu li a:hover{

background:transparent url("images/HOVER.gif") no-repeat top right;

}

 

This is the html so far:

 

<ul id="menu">

<li><a href="index.html" title="Go to the Learn HQ home page">Home</a></li>

<li><a href="about_us.html" title="Go to Learn HQ's about us page">AboutUs</a></li>

<li><a href="clients.html" title="Go to Learn HQ's clients page" >Clients</a></li>

<li><a href="news.html" title="Go to Learn HQ's news page" >News</a></li>

<li><a href="services.html" title="Go to Learn HQ's services page">Services</a></li>

<li><a href="products.html" title="Go to Learn HQ's products page"> Products</a></li>

<li><a href="resources.html" title="Go to Learn HQ's resource page" >Resources</a></li>

<li><a href="login.html" title="Go to Learn HQ's member login area" >Login</a></li>

<li><a href="contact_us.html" title="Go to Learn HQ's contact us page"> Contact Us</a></li>

</ul>

 

I want the position and style of the already existing menu to stay the same, I have tried altering bits of the CSS but have ended up in a right pickle.

 

Would appreciate any help,

 

mich

My suggestion would be to google "suckerfish drop down menu". There's lots of blogs out there that show you how to achieve what you want.

 

You will need to do a bit of JavaScript for good ol' IE6.

Thanks for the advice I will give that a go, fingers crossed

Right I have managed to alter the CSS slightly and now the menu almost works the only thing that is not working properly is that when the mouse rolls over one of the links on the top level of the menu it reveals the lower layer (like it is meant to), however, this lower level only disapears when the mouse moves completely off of the menu. therefore, if the mouse is just hovering over another item on the top level the previous drop-down remains there (It should disapear).

 

I have tried a number of things such as clear="all" divs, but I really don't understand what this does anyway!

 

Any suggestion??????? please.

 

Here is my new CSS:

 

 

#nav, #nav ul { /* all lists */

padding: 0;

list-style: none;

line-height: 1;

width:auto;

position:relative;

display:block;

height:35px;

font-size:13px;

font-weight:bold;

background:transparent url("images/OFF.gif") repeat-x top left;

font-family:Arial, Helvetica, sans-serif;

border-top-width: 1px;

border-bottom-width: 1px;

border-top-style: solid;

border-bottom-style: solid;

border-top-color: #74b0c6;

border-bottom-color: #999;

border-right-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-left-style: solid;

border-right-color: #999;

border-left-color: #999;

margin-top: 0;

margin-bottom: 0;

margin-right: 0px;

margin-left: 0px;

 

}

 

#nav a {

display: block;

width: 7em;

color:#6d7078;

text-decoration:none;

height:23px;

background:transparent url("images/DIVIDER.gif") no-repeat top right;

padding-top: 12px;

padding-bottom: 0;

}

 

#nav a:hover{

background:transparent url("images/HOVER.gif") no-repeat top right;

}

 

#nav li { /* all list items */

float: left;

width: 7em; /* width needed or else Opera goes nuts */

}

 

#nav li ul { /* second-level lists */

position: relative;

width: 7em;

left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */

background-color: #85BDD2;

}

 

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */

left: auto;

 

}

 

 

I have also added the following java script:

 

 

<script type="text/javascript"><!--//--><![CDATA[//><!--

 

sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls.onmouseover=function() {

this.className+=" sfhover";

}

sfEls.onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

 

//--><!]]></script>

 

 

The HTMl remains the same.

Oh and I forgot to say that I have only noticed this problem occuring in IE

I found this on my travels http://www.alistapart.com/articles/horizdropdowns - does that help you or too late lol