• 0

CSS Help - Nested lists and floats in a drop down menu


Question

Hello all,

Im adapting a pure CSS drop down menu from here However, i really didnt like the code, and am trying to make it more semantic, here is what i have so far.

The problem i have is, if you hover over the "About" menu item, you see the column titles and there associated unordered lists are floated next to eachother, whereas it should be like the "Services" menu for example, where the lists are below their respective headings.

Here is the original HTML:

<ul id="nav" class="dropdown">

	<li>About
		<ul>
			<li>About Us
				<ul>
					<li><a href="./">Menu Subitem #1</a></li>
					<li><a href="./">Menu Subitem #2</a></li>
					<li><a href="./">Menu Subitem #3</a></li>
					<li><a href="./">Menu Subitem #4</a></li>
				</ul>
			</li>
			<li>FAQs
				<ul>
					<li><a href="./">Menu Subitem #1</a></li>
					<li><a href="./">Menu Subitem #2</a></li>
					<li><a href="./">Menu Subitem #3</a></li>
					<li><a href="./">Menu Subitem #4</a></li>
					<li><a href="./">Menu Subitem #5</a></li>
					<li><a href="./">Menu Subitem #6</a></li>
					<li><a href="./">Menu Subitem #7</a></li>
					<li><a href="./">Menu Subitem #8</a></li>
				</ul>
			</li>
etc

and i have changed it to:

<ul id="nav" class="dropdown">

	<li>About
		<ul>
				<li>About Us</li>
				<ul>
					<li><a href="./">Menu Subitem #1</a></li>
					<li><a href="./">Menu Subitem #2</a></li>
					<li><a href="./">Menu Subitem #3</a></li>
					<li><a href="./">Menu Subitem #4</a></li>
				</ul>

				<li>FAQs</li>
				<ul>
					<li><a href="./">Menu Subitem #1</a></li>
					<li><a href="./">Menu Subitem #2</a></li>
					<li><a href="./">Menu Subitem #3</a></li>
					<li><a href="./">Menu Subitem #4</a></li>
					<li><a href="./">Menu Subitem #5</a></li>
					<li><a href="./">Menu Subitem #6</a></li>
					<li><a href="./">Menu Subitem #7</a></li>
					<li><a href="./">Menu Subitem #8</a></li>
				</ul>

		</ul>
	</li>

Or is my understanding of nested lists just wrong and i should use the original?

Cheers

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

I believe nested UL's must be within a LI tag for it to validate correctly. Example

<ul>
     <li>Point 1</li>
     <li>Point 2
           <ul>
                 <li>Sub point for point 2</li>
           </ul>
     </li>
</ul>

Link to comment
Share on other sites

  • 0

bolerodan's example is correct. The secondary/tertiary/etc unordered list must be within a list item. :)

Well, guess you learn something new every day. Atleast that's less work with the menu!

Cheers

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.