How can I create a CSS dropdown menu?

Question

How can I create a menu that looks like this one

http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp

Answer 1

See following sites for navigation menus:



CSS Library Horizontal CSS Menus: http://www.dynamicdrive.com/style/csslibrary/category/C1/

CSS Library Vertical CSS Menus: http://www.dynamicdrive.com/style/csslibrary/category/C2/

http://www.dynamicdrive.com/dynamicindex1/

http://www.cssplay.co.uk/menus/

How to Style an Unordered List with CSS: http://www.webreference.com/programming/css_style2/index.html



NavDock jQuery Plugin (Ver 1.5.1): http://plugins.jquery.com/project/NavDock



Making CSS Rollover Buttons: http://www.elated.com/articles/css-rollover-buttons/



More...

Answer 2

Dear!

• Home



• About Us
  
  
  
  
  
  • The Team
  
  
  
  • History
  
  
  
  • Vision
  
  
  
  
  
  



• Products
  
  
  
  
  
  • Cozy Couch
  
  
  
  • Great Table
  
  
  
  • Small Chair
  
  
  
  • Shiny Shelf
  
  
  
  • Invisible Nothing
  
  
  
  
  
  



• Contact
  
  
  
  
  
  • Online
  
  
  
  • Right Here
  
  
  
  • Somewhere Else
  
  
  
  
  
  

The next step is adding the CSS styles that will make the menu look good and provide the effect of showing/hiding the submenus. Note the “magic” that comes from using :hover.



ul {

font-family: Arial, Verdana;

font-size: 14px;

margin: 0;

padding: 0;

list-style: none;

}

ul li {

display: block;

position: relative;

float: left;

}

li ul { display: none; }

ul li a {

display: block;

text-decoration: none;

color: #ffffff;

border-top: 1px solid #ffffff;

padding: 5px 15px 5px 15px;

background: #2C5463;

margin-left: 1px;

white-space: nowrap;

}

ul li a:hover { background: #617F8A; }

li:hover ul {

display: block;

position: absolute;

}

li:hover li {

float: none;

font-size: 11px;

}

li:hover a { background: #617F8A; }

li:hover li a:hover { background: #95A9B1; }



////////////////////////////////////////////////////////////////////////

or

Main Menu

Item 1

Item 2

Item 3

Answer 3

have a look here http://www.cssplay.co.uk/menus/ there are all sorts of different types to choose from

Answer 4

you are able to place it on a sepret layer and then place that layer on appropriate of the different utilising over bypass visable instead of scroll

/div /div