Want more features on Pastebin? Sign Up, it's FREE!

CSS 2 Line Menu & Sub menu for Wordpress

By: wzislam on Nov 3rd, 2012  |  syntax: CSS  |  size: 1.19 KB  |  views: 549  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. //PASTED FROM : http://www.htmldrive.net/items/show/437/CSS3-only-horizontal-drop-line-tab-menu
  2. //PURPOSE: For further modification
  3.  
  4. #access {
  5.         padding: 10px 0 0 0;
  6.         margin-bottom: 40px;
  7.         border-bottom: 1px solid #999 !important;
  8. }
  9.  
  10. .menu {
  11.   float: left;
  12.   width: 960px;
  13.   margin: 0;
  14.   padding: 0;
  15.   list-style: none;
  16.   background: #dc0000;
  17. }
  18.  
  19. .menu li {
  20.   display: inline;
  21. }
  22.  
  23. .menu li a {
  24.   float: left;
  25.   color: #fff;
  26.   text-decoration: none;
  27.   margin: 0;
  28.   padding: 0 30px;
  29.   background: #dc0000;
  30. }
  31.  
  32. /* APPLIES THE ACTIVE STATE */
  33. .menu .current a, .menu li:hover > a  {
  34.   color: #fff;
  35.   text-decoration: none;
  36.   background: #bb0000;
  37. }
  38.  
  39. /* THE SUBMENU LIST HIDDEN BY DEFAULT */
  40. .menu  ul {
  41.   display: none;
  42. }
  43.  
  44. /* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
  45. .menu li:hover > ul {
  46.   position: absolute;
  47.   display: block;
  48.   width: 960px;
  49.   height: 25px;
  50.   margin: 23px 0 0 0;
  51.   background: #315299;
  52. }
  53.  
  54. .menu li:hover > ul li a {
  55.   float: left;
  56.   color: #fff;
  57.   text-decoration: none;
  58.   margin: 0;
  59.   padding: 0 30px 0 0;
  60.   background: #315299;
  61. }
  62.  
  63. .menu li:hover > ul li a:hover {
  64.   color: #120000;
  65.   text-decoration: none;
  66. }
clone this paste RAW Paste Data