Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!

How to style navigation menu in non Header module in Acute

By: srikat on Mar 29th, 2013  |  syntax: CSS  |  size: 4.14 KB  |  views: 94  |  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. /*menu in header*/
  2.  
  3. .builder-module-1 .widgetnavmenu h4.widget-title {
  4.     display: none !important;
  5. }
  6.  
  7. .builder-module-1 .right ul.menu {
  8.     float: right;
  9. }
  10.  
  11. .builder-module-1 ul.menu {
  12.     display: inline-block;
  13.     /*TODO Test the margin for all sorts of bugs.*/
  14.     margin: 4.5% 0 0 0 !important;
  15.     background: #EEEEEE;
  16.     background: -webkit-linear-gradient(#F6F6F6, #E3E3E3);
  17.     background: -moz-linear-gradient(#F6F6F6, #E3E3E3);
  18.     background: -ms-linear-gradient(#F6F6F6, #E3E3E3);
  19.     background: -o-linear-gradient(#F6F6F6, #E3E3E3);
  20.     background: linear-gradient(#F6F6F6, #E3E3E3);
  21.     border-width: 1px;
  22.     border-style: solid;
  23.     border-color: #999 #777 #777 #999;
  24.     -webkit-border-radius: 6px;
  25.     -moz-border-radius: 6px;
  26.     border-radius: 6px;
  27.     -moz-box-shadow: #000 1px 1px 2px;
  28.     -webkit-box-shadow: #000 1px 1px 2px;
  29.     box-shadow: rgba(0,0,0,.5) 1px 1px 4px;
  30. }
  31.  
  32. .builder-module-1 ul.menu li {
  33.     float: left;
  34.     position: relative;
  35.     list-style: none;
  36. }
  37.  
  38. .builder-module-1 ul.menu li a {
  39.     color: #717171;
  40.     text-shadow: #FFFFFF 1px 1px;
  41. }
  42.  
  43. .builder-module-1 ul.menu > li {
  44.     border-right: 1px solid #FFFFFF;
  45. }
  46.  
  47. .builder-module-1 ul.menu > li > a {
  48.     display: block;
  49.     padding: 10px 12px;
  50.     background: transparent;
  51.     border-right: 1px solid #C1C1C1;
  52.     color: #717171;
  53.     -webkit-transition: all .2s linear;
  54.     -moz-transition: all .2s linear;
  55.     transition: all .2s linear;
  56. }
  57.  
  58. .builder-module-1 ul.menu > li:last-child, .builder-module-1 ul.menu > li:last-child > a {
  59.     margin-right: 0;
  60.     border-right: 0;
  61. }
  62.  
  63. .builder-module-1 ul.menu > li:first-child > a {
  64.     -webkit-border-top-left-radius: 6px;
  65.     -moz-border-top-left-radius: 6px;
  66.     border-top-left-radius: 6px;
  67.     -webkit-border-bottom-left-radius: 6px;
  68.     -moz-border-bottom-left-radius: 6px;
  69.     border-bottom-left-radius: 6px;
  70. }
  71.  
  72. .builder-module-1 ul.menu > li:last-child > a {
  73.     -webkit-border-bottom-right-radius: 6px;
  74.     -moz-border-bottom-right-radius: 6px;
  75.     border-bottom-right-radius: 6px;
  76.     -webkit-border-top-right-radius: 6px;
  77.     -moz-border-top-right-radius: 6px;
  78.     border-top-right-radius: 6px;
  79. }
  80.  
  81. .builder-module-1 ul.menu > li > a:hover, .builder-module-1 ul.menu > li.currentpageitem > a {
  82.     background: #F6F6F6;
  83.     background: -webkit-linear-gradient(#E3E3E3, #F6F6F6);
  84.     background: -moz-linear-gradient(#E3E3E3, #F6F6F6);
  85.     background: -ms-linear-gradient(#E3E3E3, #F6F6F6);
  86.     background: -o-linear-gradient(#E3E3E3, #F6F6F6);
  87.     background: linear-gradient(#E3E3E3, #F6F6F6);
  88.     color: #515151 !important;
  89.     -webkit-box-shadow: inset #DDD 0 0 4px;
  90.     -moz-box-shadow: inset #DDD 0 0 4px;
  91.     box-shadow: inset #BBB 0 0 6px;
  92. }
  93.  
  94. /*child or second level*/
  95.  
  96. .builder-module-1 ul.menu li:hover > ul {
  97.     opacity: 1;
  98.     z-index: 1001;
  99.     left: -18px;
  100. }
  101.  
  102. .builder-module-1 li ul {
  103.     position: absolute;
  104.     z-index: 1000;
  105.     left: -9999px;
  106.     display: block;
  107.     width: 160px;
  108.     opacity: 0;
  109.     background: #A1A1A1;
  110.     border: 1px solid #919191;
  111.     -moz-box-shadow: rgba(0,0,0,.5) 0 0 8px;
  112.     -webkit-box-shadow: rgba(0,0,0,.5) 0 0 8px;
  113.     box-shadow: rgba(0,0,0,.5) 0 0 8px;
  114.     -webkit-transition: opacity .4s ease;
  115.     -moz-transition: opacity .2s ease;
  116.     transition: opacity .2s ease;
  117. }
  118.  
  119. .builder-module-1 li ul li {
  120.     float: none;
  121.     display: block;
  122.     border-bottom: 1px solid #818181;
  123. }
  124.  
  125. .builder-module-1 ul.menu li ul a {
  126.     display: block;
  127.     color: #212121;
  128.     text-shadow: #B1B1B1 1px 1px;
  129.     padding: 8px 10px;
  130.     width: 140px;
  131.     border-bottom: 1px solid #B1B1B1;
  132.     -webkit-transition: all .2s ease-in-out;
  133.     -moz-transition: all .2s ease-in-out;
  134.     transition: all .2s ease-in-out;
  135. }
  136.  
  137. .builder-module-1 li ul li:last-child, .builder-module-1 li ul li:last-child a {
  138.     border-bottom: 0;
  139. }
  140.  
  141. .builder-module-1 ul.menu li ul a:hover {
  142.     background: #313131;
  143.     color: #E1E1E1;
  144.     text-shadow: #313131 1px 1px;
  145. }
  146.  
  147. .builder-module-1 li ul ul {
  148.     margin-left: 178px;
  149.     margin-top: -38px;
  150. }
  151.  
  152. #ie6 .builder-module-1 ul.menu li a {
  153.     display: block;
  154.     padding: 8px;
  155. }