This week only. Pastebin PRO Accounts Christmas Special! Don't miss 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: 99  |  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. }
clone this paste RAW Paste Data