Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member inko9nito's Avatar
    Join Date
    Apr 2004
    Location
    Wylie, Texas
    Posts
    17
    Member #
    5755
    I'm trying to create a submenu using lists and css. The problem is that I would normally position the submenu using position: absolute, but then it wouldn't center the menu on the page.

    I found this site and applied their approach to my lists, but (1) it doesn't validate (I know, using spans within ul's is wrong, but I'm out of ideas), and (2) it doesn't center in IE6.

    Here's the page with unruly submenus: http://esiwebservices.com/new/contac...-services.html

    Everything looks fine in Firefox, it's IE6 that's giving me trouble, and I'd really rather use an approach that would validate.

    Does anyone have any suggestions? Please help

    Thanks in advance.
    Vera

  2.  

  3. #2
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    Without reviewing the CSS in detail it looks like you're trying to to nest span classes within <li> which I'm sure is giving you validation errors.

    Why not just use another div layer with the sub-menu in there?

  4. #3
    Junior Member inko9nito's Avatar
    Join Date
    Apr 2004
    Location
    Wylie, Texas
    Posts
    17
    Member #
    5755
    Quote Originally Posted by imagn
    Without reviewing the CSS in detail it looks like you're trying to to nest span classes within <li> which I'm sure is giving you validation errors.

    Why not just use another div layer with the sub-menu in there?

    Because I'll have this:

    Code:
    <ul><li>Main menu item
    <div>
    <ul><li>submenu item</li></ul>
    </div>
    </li>
    </ul>
    Putting divs inside <li>s will give me an error as well.

    Normally I wouldn't nest them and would put the submenu in a separate div, but I want them to be pull-down menus, so they have to be nested under the appropriate main menu item. Unless there is some other solution, but I can't figure it out yet.

    Thanks for replying, btw.
    Vera

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Why not apply the relevant positioning to the appropriate ul tag rather than to a div or a span tag?

  6. #5
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    Are you wanting the sub menu to "fly" out? per example below:

    http://ei2025.org/

  7. #6
    Member amessinger's Avatar
    Join Date
    Apr 2005
    Location
    Kansas, USA
    Posts
    46
    Member #
    9682
    Quote Originally Posted by inko9nito
    Because I'll have this:

    Code:
    <ul><li>Main menu item
    <div>
    <ul><li>submenu item</li></ul>
    </div>
    </li>
    </ul>
    Putting divs inside <li>s will give me an error as well.

    Normally I wouldn't nest them and would put the submenu in a separate div, but I want them to be pull-down menus, so they have to be nested under the appropriate main menu item. Unless there is some other solution, but I can't figure it out yet.

    Thanks for replying, btw.
    Wrapping your nested list in a div is unneccessary. The list itself is a block-level element, and can be styled in the same way you would style a div. All you should need is this (add classes / ids as needed for style hooks):

    Code:
    <ul>
      <li>First Main Menu Item
        <ul>
          <li>submenu item 1</li>
          <li>submenu item 2</li>
        </ul>
      </li>
      <li>Second Main Menu Item</li>
    </ul>
    ...and so on.

    For more information about creating and styling lists as navigation, check out Listutorial. This Sitepoint tutorial covers similar ground, then steps through nested lists and drop-down / fly-out navigation using lists. HTML Dog has even more drop-down goodness, with an article covering the successors of the famous "Suckerfish" drop-down navigation technique.

    Before you go ahead with drop-down navigation, be aware that there are some usability drawbacks to this approach. Drop-down menus made Smashing Magazine's list of the top 10 usability nightmares recently. This article has more information about the problems with drop-down navigation on websites.
    Zenscope Studio
    Quality Website Development and Graphic Design
    Specializing in Independently-Owned Businesses and Non-Profits
    www.zenscope.com


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com