How do I get this unordered list to look like it is and still validate:

<ul>
<li>Natural Stone</li>
<ul>
<li>Granite Tile</li>
<li>Travertine Tile</li>
<li>Marble Tile</li>
<li>Slate Tile</li>
</ul>
<br />
<li>Floor Tile</li>
<ul>
<li>Ceramic Floor Tile</li>
<li>Glazed Porcelain Tile</li>
</ul>
<br />
<li>Glass Mosaic Tile</li>
</ul>

Use a definition list

<dl>
<dt>Natural Stone</dt>
<dd>Granite Tile</dd>
<dd>Travertine Tile</dd>
<dd>Marble Tile</dd>
<dd>Slate Tile</dd>

<dt>Floor Tile</dt>

<dd>Ceramic Floor Tile</dd>
<dd>Glazed Porcelain Tile</dd>

<dt>Glass Mosaic Tile</dt>
</dl>

Add margins to the dt if you want some space above & below the element

You can't close your line item <li> tag when you have a sub unordered-list <ul>

I have taken the liberty to redo your code on my dev site. Have a look here:
http://dev.rionmassie.com/work/cupantileandpaint.html

I commented the first section to show you what I mean by not closing your line item until you are done with that line item.

This validates as well!!

++Talkupation

Originally Posted by rion

You can't close your line item <li> tag when you have a sub unordered-list <ul>

I have taken the liberty to redo your code on my dev site. Have a look here:
http://dev.rionmassie.com/work/cupantileandpaint.html

I commented the first section to show you what I mean by not closing your line item until you are done with that line item.

This validates as well!!

++Talkupation

This should validate as nested lists should be within the relevant <li> ... </li> pair. So MattCoops code should now look like

 
<ul>
<li>Natural Stone
  <ul>
  <li>Granite Tile</li>
  <li>Travertine Tile</li>
  <li>Marble Tile</li>
  <li>Slate Tile</li>
  </ul>
</li>
<li>Floor Tile
  <ul>
  <li>Ceramic Floor Tile</li>
  <li>Glazed Porcelain Tile</li>
  </ul>
</li>
<li>Glass Mosaic Tile</li>
</ul>

Originally Posted by alan1961

This should validate as nested lists should be within the relevant <li> ... </li> pair. So MattCoops code should now look like

 
<ul>
<li>Natural Stone
  <ul>
  <li>Granite Tile</li>
  <li>Travertine Tile</li>
  <li>Marble Tile</li>
  <li>Slate Tile</li>
  </ul>
</li>
<li>Floor Tile
  <ul>
  <li>Ceramic Floor Tile</li>
  <li>Glazed Porcelain Tile</li>
  </ul>
</li>
<li>Glass Mosaic Tile</li>
</ul>

Uh yeah....that's what I said....

ah ha
So that's how I correctly nest sub lists

thanks rion

Maybe I still don't get it.
How do I get this to validate:

<ul>
 <li>Natural Stone
  <ul>
 <li>Granite Tile</li>
   <ul>
    <li>Black Galaxy</a></li>
    <li>Chestnut</a></li>
    <li>Green Diamond</a></li>
    <li>Jalor Cafe</a></li>
    <li>Java</li>
    <li>Mountain Green</li>
    <li>New Venezia Gold</li>
    <li>Shanxi Black</li>
    <li>Verde Butterfly</li>
   </ul>
   </li>
 <li>Travertine Tile</li>
   <ul>
    <li>Baja</li>
    <li>Chiaro</li>
    <li>Claros Silver</li>
    <li>Driftwood</li>
    <li>Efes Noce</li>
    <li>Jinshan Bone</li>
    <li>Jinshan Carmel</li>
    <li>Jinshan Coffee</li>
    <li>Noir</li>
   </ul>
   </li>
 <li>Marble Tile</li>
   <ul>
    <li>Black Pearl</li>
    <li>Cafe Emperador</li>
    <li>Carrara</li>
    <li>Empress Green</li>
    <li>Forest Brown</li>
    <li>Forest Green</li>
    <li>Rosso Levanto</li>
   </ul>
   </li>
 <li>Slate Tile</li>
   <ul>
    <li>Adoni Black</li>
    <li>Copper Rust</li>
    <li>Ganges Kund</li>
    <li>Green Mica</li>
    <li>Jack Multi</li>
    <li>Zeera Green</li>
   </ul>
   </li>
  </ul>
  </li>
 <li>Floor Tile
  <ul>
 <li>Ceramic Floor Tile</li>
 <ul>
  <li>Afica Avana</li>
  <li>African Noce</li>
  <li>Alba</li>
  <li>Alberta</li>
  <li>Alhambria</li>
  <li>Altamira</li>
  <li>America</li>
  <li>Antares</li>
  <li>Arizona</li>
  <li>Arrayan</li>
  <li>Atlas</li>
  <li>Balbi Travertino</li>
  <li>Bamboo</li>
  <li>Bellagio Noce</li>
  <li>Berscia</li>
  <li>Blanco</li>
  <li>Botticino Classico</li>
  <li>Brescia</li>
  <li>Buonarroti</li>
  <li>Calabria Crotone</li>
  <li>Cancun</li>
  <li>Chisholm Autumn</li>
  <li>Climente Sand</li>
  <li>Coliseum Floor</li>
  <li>Colorado</li>
  <li>Colorado Rojo</li>
  <li>Cotto Verona</li>
  <li>Cyrano</li>
  <li>Daino</li>
  <li>Duluth White</li>
  <li>Ebro</li>
  <li>Ectron Rosso</li>
  <li>Egeum</li>
  <li>Ely Dusk</li>
  <li>Everest</li>
  <li>Ferrara Brown</li>
  <li>Ferrara Nero</li>
  <li>Focus</li>
  <li>Gallia</li>
  <li>Gobi Ceramic</li>
  <li>Grecia</li>
  <li>Hibbing Grey</li>
  <li>Himalaya</li>
  <li>Himalya Noce</li>
  <li>Indian Slate</li>
  <li>Julieta</li>
  <li>Kairos Ocra</li>
  <li>Kronos</li>
  <li>La Cianca</li>
  <li>LaRiserva</li>
  <li>Lenox</li>
  <li>Lidra Noce</li>
  <li>Luxor</li>
  <li>Magiara</li>
  <li>Majorca Salmon</li>
  <li>Mediterania Sea</li>
  <li>Metal</li>
  <li>Monte Carlo</li>
  <li>Nizza</li>
  <li>Nogal</li>
  <li>Oriente</li>
  <li>Origini</li>
  <li>Orlando</li>
  <li>Orleans</li>
  <li>Paris</li>
  <li>Pietra D Assisi</li>
  <li>Pompano Beige</li>
  <li>Poseidon</li>
  <li>Rapa Nui Mataveri</li>
  <li>Rocks Black</li>
  <li>Romeo</li>
  <li>Roseau</li>
  <li>Sierra</li>
  <li>Storie</li>
  <li>SuperMatte</li>
  <li>Teak</li>
  <li>Terra</li>
  <li>Thermae Saturnia</li>
  <li>Tibano</li>
  <li>Tibet Taupe</li>
  <li>Timor Jet</li>
  <li>Tobacco</li>
  <li>Toscana Floor</li>
  <li>Troy Gris</li>
  <li>Urban</li>
  <li>Valentino</li>
  <li>Vienna</li>
  <li>Volta Gris</li>
  <li>Vulcano</li>
  <li>Wood Hickory</li>
 </ul>
 </li>
 <li>Glazed Porcelain Tile</li>
 <ul>
  <li>Angkor</li>
  <li>Basalto</li>
  <li>Cadiz Bone</li>
  <li>Durango</li>
  <li>Giusti</li>
  <li>Himalya</li>
  <li>Indian Slate Copper</li>
  <li>Isole</li>
  <li>Kund Multi</li>
  <li>Lapillo</li>
  <li>Nepal</li>
  <li>Neptuno</li>
  <li>Pietra D'Assisi</li>
  <li>Poseidon</li>
  <li>Rosso</li>
  <li>Sienite</li>
  <li>Thermae Floor</li>
  <li>Tobacco</li>
 </ul>
 </li>
  </ul>
  </li>
 <li>Glass Mosaic Tile</li>
 <ul>
  <li>Face Mounted Glass Mosaic Tile</li>
  <ul>
  <li>Amber Mix</li>
  <li>Autumn Mix</li>
  <li>cherry Glass</li>
  <li>Copper Mix</li>
  <li>Green Lagoon</li>
  <li>Latte Glass</li>
  <li>Noche Glass</li>
  <li>Ocean Blue</li>
  <li>Sky/Opal Mix</li>
  <li>Ocean/Opal Mix</li>
  <li>Lagoon/Opal Mix</li>
  <li>Sand Glass</li>
  <li>Sky Glass</li>
  <li>Sky Mix</li>
  <li>Spring Mix</li>
  <li>Water Glass</li> 
 </ul>
 </li>
 </ul>

you haven't got your <li> nesting right

<li>Granite Tile</li>
<li>
<ul>
<li>Black Galaxy</a></li>
<li>Chestnut</a></li>
<li>Green Diamond</a></li>
<li>Jalor Cafe</a></li>
<li>Java</li>
<li>Mountain Green</li>
<li>New Venezia Gold</li>
<li>Shanxi Black</li>
<li>Verde Butterfly</li>
</ul>
</li>
<li>Travertine Tile</li>

Hi -

I suggest you simply run your code through the validator, then read and note what it finds -- you'll get answers to your code problems with line numbers for reference. I pasted your code into a test page, ran it through the W3C validator, and got:

1. Line 12, Column 6: document type does not allow element "UL" here; assuming missing "LI" start-tag.
   This is the problem with closing your List Item before a nested UL, which has already been explained, above.
2. Line 14, Column 19: end tag for element "A" which is not open.
   There is a closing link tag there with no preceeding open link tag.
3. Line 15, Column 24: end tag for element "A" which is not open.
   Same as #2
4. Line 16, Column 21: end tag for element "A" which is not open.
   Same as #2
5. Line 25, Column 6: document type does not allow element "UL" here; assuming missing "LI" start-tag.
   Same as #1
6. Line 38, Column 6: document type does not allow element "UL" here; assuming missing "LI" start-tag.
   Same as #1

There were 13 total errors found. http://validator.w3.org/

- Scott

Something to help keep you on track:

--Whatever you open, make sure you close it.
--Keep your structure in mind when you code.

That is, you are making a menu from an unordered list. Put your opening and closing <ul> tags in first. Put in opening and closing <li> tags between them. These items are links, so put in opening and closing <a> tags between them. Copy and paste as many of these as you need between the <ul> tags. Then type in your specific text or <img> between each set of <a> tags as applies to your menu. By doing it this way you should never have a validation problem, which in your case is predominantly from missing opening and closing tags.

Tee Hee

Missed those few closing anchors, maybe I shouldn't have been reading someone else's code after midnight.

I think I got it now, have a look at our Charlotte Tile Shop

I'm mimmicking the hypertext image popup like seen on our Tile Designs layout.
So when the user hovers over the name of the tile it will show an image to the upper right of the tile name.


Question?

Would there be any problems with the images popups associated with the text being too slow and not being shown? As with slower connections?