Drop down menu left/right position

[theremotedr]

Hi,
On my web site each drop down list which flies out under each heading aligns itself left to right.
Looking at the heading Others,it also flies out left to right.
Can it be altered so it flies out and aligns itself right to left.

I ask because on the iPad half of it is unreadable.
Website http://www.theremotedoctor.co.uk/index.html

Screen shot from iPad supplied when screen is moved over,otherwise you only see what's is inline with the edge of the Others heading right hand border.

[Deadweight]

html:

<a href="#">Others</a>
<ul class="xxx">

css:

.xxx{
left:-100%;
}

[theremotedr]

Ive added the code shown above but something is incorrect.
Please take a look.

http://www.theremotedoctor.co.uk

Also error code page
http://validator.w3.org/check?uri=ht...org%2Fservices

[Beverleyh]

The problem is that you now have two open <ul> tags;

<a href="#">Others</a>
     <ul class="others">
     <ul>

What Deadweight was indicating, was for you to make a modification to your existing markup by adding the "xxx" class. It wasn't so much a copy+paste addition, as a "make your markup look like this" instruction, although that might not have been obvious.

It's a little awkward for us (hardened coders) sometimes because we don't know how much knowledge the person asking for help has, and unless the poster specifically says that they're a beginner or that they use a point-and-click website builder, we often assume that the poster knows the rules of well-formed HTML markup and some CSS. Your post count, and the rank/label that goes with it, may work against you too in that respect (implying more coding experience).

Anyway, on this occasion, all that's needed is to remove the extra <ul>

[theremotedr]

I have removed the <ul> but still the list flies out like before ?

[theremotedr]

Unless i removed the incorrect <ul> there is no change even after adding the code advised.
Checking for any errors shows nothing wrong,so i am lost as to why the list does not fly out the opposite way.
http://validator.w3.org/check?uri=ht...Inline&group=0

[Deadweight]

Sorry I took a screenshot this time:

[theremotedr]

Hi,
Thanks for the screen shot but not quite able to see it properly.

I think what i can see ive now added to my page and the drop down list is now reversed but have some yellow mark ups.
http://validator.w3.org/check?uri=ht...org%2Fservices

Please take a look & advise so i can edit the other pages and mark this as resolved.

[Beverleyh]

For the first validation point - a warning: Here is more information on what a BOM is and how to remove it: http://www.w3.org/International/ques...er-mark.en.php

For the second validation point - an error: Look at your markup that has been flagged by the validator;

<ul style="left: -100%;">
</li> <--- a closing list tag... but what about the opening one?
<li class="current"> <--- an opening list tag... but the list item it empty... where should the closing tag be?

and compare it to a well-formed HTML list (you can probably compare to lists elsewhere on your page to look for patterns <--- big tip right there - a lot of successful troubleshooting comes down to being able to identify patterns). The official W3C list specifications can be found here with examples: http://www.w3.org/wiki/HTML_lists Look over the full page but specifically under the 'Nested List' heading for further advice on how to create a nested list, which is what most complex navigation systems use. Indenting the <li> elements (tabs, spaces, your choice) according to how deep they are will help you see the structure more clearly. Also, some HTML editors, such as Notepad++ will create collapsible code blocks to help you see paired opening and closing elements (helpful when troubleshooting nested lists that have gone awry).

The third validation point is another warning, so it's up to you whether you fix it or not. The recommendation is to add a heading to that section, so search the web page doc for <section id="content" class="wide-content"> (the flagged section) and decide if it is appropriate to insert a heading there using the h2-h6 tags.

[theremotedr]

     <li><a href="#">Others</a>
     <ul style="left: -100%;">
     </li>
     <li class="current">

So the correct thing to do is delete the </li>