stuck with drop down menu

[jon22]

I am making this drop menu but having some troubles.

link to my site: http://www.example.com
As you can see the main items won't float next to eachother, the only way they do is when i close the <li> tag after the {LINKGROUP} below however then I don't have any drop down at all! so im a little stuck here.

here is the tpl file

<!-- BEGIN: navcategories -->
 <!-- BEGIN: group -->
<ul id="cssdropdown">

<li class="mainitems">{LINKGROUP}

  <ul class="subuls"> <!-- BEGIN: li -->
<a href="{LINKDATA}" class="{FONTSTYLE}">{DATA}</a>

   <!-- BEGIN: openul -->
{OPENUL}
<!-- END: openul -->
   
<!-- BEGIN: subli -->
<a href="{SUBLINKDATA}" class="{SUBFONTSTYLE}">{SUBDATA}</a>{COMMA}
<!-- END: subli -->
   
<!-- BEGIN: closeul -->
{CLOSEUL}
<!-- END: closeul -->
   <!-- END: li --></ul>
<!-- END: group -->
 
<!-- END: navcategories -->

Css:

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

#cssdropdown li {
float: left;
position: relative;
}
.linkGroup:hover {
background-color:#747474;
cursor:pointer;
}
.mainitems{

 background-color: transparent !important;
 border-bottom-style: solid !important;
 border-bottom-width: 0 !important;
 border-left: 1px solid #A9A9A9 !important;
 border-right: 1px solid #585858 !important;
 border-top-style: solid !important;
 border-top-width: 0 !important;
}


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

.subuls{
display: none;
position: absolute;
top: 1.2em;
left: 0;
background-color: #fff;
border: 1px solid black;
}

.subuls li{
width: 100%;
padding:5px;
}

.subuls li a:hover{
text-decoration: underline;
color:#913a93;
}


#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;
}

[edited by: alt131 at 3:12 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

[alt131]

Hi jon22, good idea to Validate [validator.w3.org] your code before trying to resolve the css issues

I've had a quick look at the site itself, but the issue can be seen in the posted code. I think things like this:
<!-- BEGIN: subli -->
<a href="{SUBLINKDATA}" class="{SUBFONTSTYLE}">{SUBDATA}</a>{COMMA}
<!-- END: subli -->
may be confusing things: Those comments are not opening and closing the required html elements, so the html for the menu really looks like this:

<ul id="cssdropdown">
<li class="mainitems">
<ul class="subuls">
<a href="{LINKDATA}" class="{FONTSTYLE}">{DATA}</a>
<a href="{SUBLINKDATA}" class="{SUBFONTSTYLE}">{SUBDATA}</a>{COMMA}
</ul>

Both the <a>'s need to be inside <li>'s. The last <ul> is closing ul.subuls, not ul.csssdropdown as the comments suggest, and there is also a missing close for li.mainitems.

That makes it difficult for the styles to be applied reliably - or at all. As an example of what validating will help resolve, the selectors
.subuls li
.subuls li a:hover
are meant to apply to an <li> inside ul.subuls, but because the <a>'s have not been wrapped in an <li>, there aren't any present for the selectors to style.

[jon22]

Thanks a lot for your advice, got it working now.