[ASC999]

I'm struggling to get the dropdown to work. Does anyone have any suggestions?

CSS:

/* header menu */
#menu {
clear: both;
margin: 0;
padding: 0 0 10px 0;
width: 770px;
background: #FFF url(images/wrap-bg.jpg) repeat-y;
float: left;
}
#menu ul {
font: bolder 14px 'Trebuchet MS', sans-serif;
width: 740px;
color: #FFF;
background-color: #4E3525;
margin: 0 15px;
padding: 0;
display: inline;
border-bottom: 6px solid #FFF;
float: left;
}
#menu li {
float: left;
list-style: none;
position: relative;
}
#menu li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
#menu li a {
display: block;
padding: 5px 15px;
color: #FFF;
text-decoration: none;
}
#menu li a:hover {
background: #C8935D;
color: #FFF;
}
#menu li a#current {
background: #993333;
color: #FFF;
}

li > ul {
top: auto;
left: auto;
}

#menu li:hover ul { display: block; }

/* dropdown menu position */
#menu table{
border-collapse:collapse;
z-index: 80px;
left:-1px;
top:5px;
}

/* hide the sub level links */
#menu ul ul {
visibility:hidden;
position:absolute;
width:100%;
height:0;
}

/* make the sub level visible on hover list or link */
#menu ul li:hover ul,
#menu ul a:hover ul{
visibility:visible;
padding-left: 0;
padding-top: 0;
position: absolute;
}

HTML:

<div id="menu">
<ul>
<li><a href="index.html" id="current">Home</a></li>
<li><a href="index.html">About us</a></li>
<ul>
<li><a href="index.html" title="Our aims & objectives">Our goals</a></li>
<li><a href="index.html" title="Shows, workshops & courses">Events</a></li>
</ul>
<li><a href="index.html">Alpaca info</a></li>
<li><a href="index.html">Ivywell herd</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Links</a></li>
<li><a href="index.html">Contact us</a></li>
</ul>
</div>

[bocaj]

What's wrong with it? or what's happening?

Usually the dropdown ul needs to be nested within the parenting li item, whereas in yours it isn't, is this the problem?

I.E try changing your html to this

<div id="menu">
<ul>
<li><a href="index.html" id="current">Home</a></li>
<li><a href="index.html">About us</a>
<ul>
<li><a href="index.html" title="Our aims & objectives">Our goals</a></li>
<li><a href="index.html" title="Shows, workshops & courses">Events</a></li>
</ul>
</li> 
<li><a href="index.html">Alpaca info</a></li>
<li><a href="index.html">Ivywell herd</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Links</a></li>
<li><a href="index.html">Contact us</a></li>	
</ul>	
</div>

[ASC999]

Hi Bocaj,

Many thanks for your reply. The dropdown is now working!

I now seem to have 2 other small issues however:

• You need to move the curser very slowly & accurately in order to select one of the 2nd level links on the dropdown menu. It can take several attempts to move from the menu bar to the list as they keep hiding.
  
• I can't seem to change the background colour on the dropdown lists - they just stay clear accept the link you are hovering over.

All help is much appreciated - as you may be able to tell, i am a complete novice at this!

[bocaj]

For #1 you need to add padding to the sub links, without seeing it in action, it's hard to guess. but try adding in something like this

#menu ul li ul li a{padding: 5px 15px}

In regards to #2 try changing

#menu li a{}

to something like

#menu li a {
display: block;
padding: 5px 15px;	
color: #FFF;	
text-decoration: none;	
background-color:#f00
}

[ASC999]

Once again, many thanks for your help - all is now working well.

Hopefully I will be able to sleep tonight without dreaming about codes!