hi im creating a drop down menu for a clients website ( i didn't build it ) but im having a little problem, I think its just a simple solution but im having problems locating it.

for some reason when i implemented the drop down on the website the logo, menu and submenu's all became pushed to the right a little

also some content on the page gets pushed down

the test site is at flexdesigns.co.uk/adamsons/dev with username admin and password adamsonslaw

the real site is at the password of the test site with co.uk tld

thanks

ill post the code:

<table width="100%" cellspacing="0" cellpadding="0">
<tr>

<td class="top-menu">

<ul id="cssdropdown">

<li class="mainitems">

<a href="index.php" title="Home">Home</a> |

<ul class="subuls">

<li> <a href="#" title="test">test</a></li>
<li> <a href="#" title="test">test</a></li>
<li> <a href="#" title="test">test</a></li>

</ul>

</li><li class="mainitems">

<a href="About-Adamsons-Law-Solicitors.php" title="About Adamsons Law Solicitors">About us</a> |

</li><li class="mainitems">

<a href="departments.php" title="Adamsons Departments">Departments</a> |

<ul class="subuls" style="width: 15em">

<li> <a href="personal-injury.php" title="Personal Injury claims">Personal Injury</a></li>
<li> <a href="#" title="Immigration Law">Immigration Law</a></li>
<li> <a href="#" title="Criminal Defence">Criminal Defence</a></li>

</ul></li>

<li class="mainitems">

<a href="news.php" title="Latest Law news from Adamsons">Latest News</a> |

</li><li class="mainitems">

<a href="contact-us.php" title="Contact Adamsons Law Solicitors">Contact us</a>

</li></ul>

</td>
</tr>
</table>

//************ drop down menu *****************//

#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
text-align:left
}

#cssdropdown li {
float: left;
position: relative;
list-style-type: none;
text-align:left
}

.mainitems{

z-index:1000;
text-align:left
}

.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}

.subuls{
display: none;
width: relative;
position: absolute;
top: 1.2em;
background-color: #9cc25b;
border: 2px solid #065195;
border-top: none;
text-align:left
}

.subuls li{
width: 100%;
list-style-type: none;
}

.subuls li a{
text-decoration: underline;
list-style-type: none;
text-align:left
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;

}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

//************ drop down menu *****************//

thanks

I had a look whether there would be a quick fix, but there isn't. At least not in a way that makes/leaves a semantic, intuitive code. You'll have to rewrite it from scratch for that. The good news is that that is really easy. Much easier than we had always thought. See my signature for an indirect paste-into-address-bar-link to a tutorial on that, because I cannot post any hyperlinks here yet due to my number of posts. And with less than 10 posts one is not allowed to send PMs either.

surly there must be a fix,im not going to re write from scratch as i think finding out what cause a problem and why, then fixing it is most satisfying and good practice for when you or someone else may come across a similar problem in the future.

thanks

I'm sorry but, HTML 4.01 TRANSITIONAL with TABLES for layout??? How very 90's of you.

You're not going to get the best results or cross-browser compatibility with that sloppy doctype, at LEAST go to HTML 4 STRICT, then clean up all the code errors for starters. Once you've got clean code, you're at a better place to troubleshoot what might be going on.

But seriously, you need to get rid of those nasty tables for layout, they are not helping you in the slightest and you're not helping your clients, especially on mobile platforms.

surly there must be a fix

No quick fix, only a complete make-over can cure your problems. You have multiple problems, on top of the doctype/table thing.

like i said in the beginning i did not create the site im just working on it now and im going to be completely redesigning the site with full css layout but firstly i need to work on creating them some content so need to create multiple new pages and this drop down menu to categorise them

Originally Posted by LadynRed

I'm sorry but, HTML 4.01 TRANSITIONAL with TABLES for layout??? How very 90's of you.

You're not going to get the best results or cross-browser compatibility with that sloppy doctype, at LEAST go to HTML 4 STRICT, then clean up all the code errors for starters. Once you've got clean code, you're at a better place to troubleshoot what might be going on.

But seriously, you need to get rid of those nasty tables for layout, they are not helping you in the slightest and you're not helping your clients, especially on mobile platforms.

Originally Posted by flexdesigns

like i said in the beginning i did not create the site im just working on it now and im going to be completely redesigning the site with full css layout but firstly i need to work on creating them some content so need to create multiple new pages and this drop down menu to categorise them

Don't even waste your time, just go with a table-less design. If you know what you are doing, it won't take that long either.

While you're at at, use some CSS3 and HTML5 too.