locked
Nested lists RRS feed

  • Question

  • I am trying to create a flyout from a dropdown menu, so I have three levels of unordered lists (the horizontal menu at the top, then the vertical dropdown menus, and then a flyout when you hover over the dropdown menu items).  However, when I up the <ul> code for the third nested list Expression Web 4 underlines the <ul> with a red squiggly and tells me:

               In XHTML 1.0 Transitional the tag <ul> cannot contain a tag <ul>

    Is there a limit to how many nested lists you can have?  Is there another way to do this in Expression Web?

    Thanks for any help you may have!

     

    Thursday, January 5, 2012 4:14 PM

Answers

  • Check your syntax since you didn't post a link. Your nested ul should be inside of an open li not directly in an <ul>:

    <ul>
    <li>Level 1
        <ul>
           <li>Level 2
               <ul>
                  <li>Level 3</li>
                  <li>next level 3 item</li>
               </ul> <!-- close level 3 -->
            </li> <!-- close level 2 list item that contains the third level list -->
            <li>next level 2 item</li>
           </ul> <!-- close level 2 -->
    </li> <!-- close level 1 list item that contains the second level list -->
    <li>next level 1 item</li>
    </ul> <!-- close level 1 -->


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    • Marked as answer by EwersArch Saturday, January 14, 2012 1:33 PM
    Thursday, January 5, 2012 4:24 PM
  • As Cheryl said, is sounds like you are not correctly nesting lists.

    A list contians list items (li).  You can put another list inside *a listitem*.  That's how you nest them.

     

    Here's an exercise:

    In EW's design view, create a sequence of several paragraphs with a few words in each (just hit return after some words, and the next paragraph will start).

    Select those paragraphs, and use EW's dropdown style menu and select an Unordered or Orderd list.  EW will create your list for you.

    Now here's a handy trick for nesting:  Select a group of two or three of the resulting list items, and click the "increase indent position" icon on the toolbar.   EW will know that you mean to nest the selected items of the list.  Repeat that, if you want to nest some of them further.

    Now, look in Code View and see the correct syntax that results.

    • Marked as answer by EwersArch Saturday, January 14, 2012 1:33 PM
    Thursday, January 5, 2012 4:38 PM

All replies

  • Check your syntax since you didn't post a link. Your nested ul should be inside of an open li not directly in an <ul>:

    <ul>
    <li>Level 1
        <ul>
           <li>Level 2
               <ul>
                  <li>Level 3</li>
                  <li>next level 3 item</li>
               </ul> <!-- close level 3 -->
            </li> <!-- close level 2 list item that contains the third level list -->
            <li>next level 2 item</li>
           </ul> <!-- close level 2 -->
    </li> <!-- close level 1 list item that contains the second level list -->
    <li>next level 1 item</li>
    </ul> <!-- close level 1 -->


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    • Marked as answer by EwersArch Saturday, January 14, 2012 1:33 PM
    Thursday, January 5, 2012 4:24 PM
  • As Cheryl said, is sounds like you are not correctly nesting lists.

    A list contians list items (li).  You can put another list inside *a listitem*.  That's how you nest them.

     

    Here's an exercise:

    In EW's design view, create a sequence of several paragraphs with a few words in each (just hit return after some words, and the next paragraph will start).

    Select those paragraphs, and use EW's dropdown style menu and select an Unordered or Orderd list.  EW will create your list for you.

    Now here's a handy trick for nesting:  Select a group of two or three of the resulting list items, and click the "increase indent position" icon on the toolbar.   EW will know that you mean to nest the selected items of the list.  Repeat that, if you want to nest some of them further.

    Now, look in Code View and see the correct syntax that results.

    • Marked as answer by EwersArch Saturday, January 14, 2012 1:33 PM
    Thursday, January 5, 2012 4:38 PM
  • Thanks Cheryl - that was exactly it.  Can you tell I am new at this?

    Peter

     

    Thursday, January 5, 2012 8:34 PM
  • Kathy:

    Awesome - thanks for the tip!

     

    Thursday, January 5, 2012 8:35 PM
  • Peter,

    You may want to mark the answers that helped you so if someone else has the same question they'll see the answers first.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Thursday, January 5, 2012 8:46 PM