Hi, can't get my menu to line up, can you help?

Hi, I'm having trouble getting my menu to behave.

The top line/items are all fine, but I can't quite get the dropdowns to behave.

Can anyone help please? Menu is on here:

http://www.formybike.co.uk/index.ntml

Many thanks in advance.

 

I suppose this would help too:

 

Considering you don't even have a site at that URI, kind of hard to help you. Laugh is your index.html is just some empty scripttardery, but if you try to access the host domain it 403's? :/

 

you should have html structure like:
<ul>
<li><a href="#">SERVICES</a>
<ul>
<li><a href="#">DROPDOWN ONE</a></li>
<li><a href="#">DROPDOWN 2</a></li>
<li><a href="#">DROPDOWN 3</a></li>
</ul>
</li>
<ul>

css would be like(position relative and position absolute are crucial):
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;}
li ul {display: none;}
ul li a {display: block;padding: 10px;text-decoration: none;white-space: nowrap;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
#drop-nav li ul li {border-top: 0px;}

 

Check out this one: http://codepen.io/philhoyt/pen/ujHzd

 

One problem with both the code answers given so far is that both use display:none; -- This can prevent some screen readers like JAWS or even some search engines from obeying the menu and/or spidering the links inside it. TECHNICALLY neither should pay any attention to the CSS, but thanks to people abusing it for hidden content search has been paying attention to display:none in the screen media for about a decade now.

The more preferred approach is to either use a negative left position to slide it off the screen, or overflow:hidden. I prefer the latter as it has no repositioning issues in legacy IE and is typically easier to code.

Loosely based on @qwikad.com's HTML.

http://www.cutcodedown.com/for_others/twelfty/template.html

The directory is unlocked for easy access to the gooey bits and pieces:
http://www.cutcodedown.com/for_others/twelfty/

As I use overflow:hidden and overflow:visible on the LI:hover state it ends up far simpler than the display:none method, without any of the headaches of "why aren't pages linked to in my menu indexing?"

That said, I've abandoned dropdowns of more than single depth since they are rubbish usability on touch-screens. It's an outdated concept that was never very good from a usability/accessibility standpoint in the first place.