1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Horizontal menu with Horizontal submenu

Discussion in 'CSS' started by Lukas, Oct 21, 2006.

  1. #1
    I asked this question earlier but may have made other confused.

    My goal is to make a Horizontal submenu like these sites:

    www.forbes.com
    www.aplus.net
    www.davacosourcing.com

    However, I'd like it to be ALL CSS, no images and while the mouse is hovering on the main horizontal menus - say for example "Home", "About us", "Products", etc..it displays a clickable "horizontal submenu" just below it, (Not Vertical, which is all the search engines seem to have ) .


    I did look at suckerfish & cssforplay.co.uk and there were no solutions.

    I will accept javascript if it's necesary but prefer only CSS. I really appreciate any help.

    Thanks again.
     
    Lukas, Oct 21, 2006 IP
  2. chewbacca

    chewbacca Peon

    Messages:
    132
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    chewbacca, Oct 21, 2006 IP
  3. Lukas

    Lukas Well-Known Member

    Messages:
    1,299
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    130
    #3
    Thanks, it's a good article.

    I read thru it a couple of times and tested the code out and the top horizontal menu does not display, the bottom "subnav" Horizontal menu does.

    I used the .js as well.

    can you cut & paste and to see what I am talking about.
     
    Lukas, Oct 22, 2006 IP
  4. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,126
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You might also check out Accessible Website Menu as well. That is who we have used in the past and been very pleased with the results.
     
    Corey Bryant, Oct 22, 2006 IP
  5. chewbacca

    chewbacca Peon

    Messages:
    132
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Are you copying the code from http://www.alistapart.com/d/hybrid/hybrid-4.html ?
    It works.

    It might work, but it costs money. :p
     
    chewbacca, Oct 26, 2006 IP
  6. killer2021

    killer2021 Peon

    Messages:
    872
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    wow definitely a good idea!
     
    killer2021, Nov 9, 2008 IP
  7. Varsys Inc.

    Varsys Inc. Peon

    Messages:
    51
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Good article! Thanks
     
    Varsys Inc., Feb 8, 2009 IP
  8. sellhousefast

    sellhousefast Active Member

    Messages:
    364
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    68
    #8
    That has been bookmarked. Thanks a million



     
    sellhousefast, Feb 25, 2009 IP
  9. AnujTela

    AnujTela Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    in my application there is a main menu and sub menu corresponding to each item in main menu.
    when i take my pointer on any item in main menu the sub menu appears horizontally but it doesnot start from extreme left. which property should i change in css or html so that the sub menu will start from extreme left??
     
    AnujTela, Jun 5, 2010 IP
  10. aRae

    aRae Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Hi Lucas,

    There are two images we need to link to so we can see all the nav bar.

    One is in
    #divNav
    background-image: url(yourImageHere.jpg (800 x 80px)


    The other is in
    #liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a
    background-image: url(bk-dropdownMap.gif (500 x 98px)

    Once you link to some images, it should work and you will see everything. Hope that helps!
     
    aRae, Dec 16, 2010 IP
  11. aRae

    aRae Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks chewbacca! Awesome article. I love reading A List Apart's stuff.
     
    aRae, Dec 16, 2010 IP
  12. wounded1987

    wounded1987 Well-Known Member

    Messages:
    2,914
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    150
  13. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #13
    A link to the website would help much more instead ...
     
    CSM, Dec 16, 2010 IP
  14. 3magic

    3magic Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Hi,thanks for providing such useful link because i was also facing the same problem in designing of my website.
     
    3magic, Dec 27, 2010 IP