Jump to content

briben1976

Members
  • Posts

    1
  • Joined

  • Last visited

briben1976's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. I am trying to get my navigation menu to show up in 2 columns for the sub menu since it is a long list but havent been successful yet. Here is the css script: .navigation { position: relative; top: 30px; clear: both; margin: 0 -10px 0; padding: 0 10px; border-width: 1px; border-style: solid; border-color: #343131; } .ie9 .navigation, .not-ie .navigation {z-index: 30;} .navigation { background: #f7f5ed; /* Old browsers */ background: -moz-linear-gradient(top, #f7f5ed 0%, #ebe9e2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5ed), color-stop(100%,#ebe9e2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* IE10+ */ background: linear-gradient(to bottom, #f7f5ed 0%,#ebe9e2 100%); /* W3C */ } .navigation { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.05); -moz-box-shadow: 0 0 3px rgba(0,0,0,.05); box-shadow: 0 0 3px rgba(0,0,0,.05); zoom: 1; } .ie7 .navigation, .ie8 .navigation { behavior: url(../js/PIE.htc); box-shadow: 0 0 3px rgba(0,0,0,.02); } .navigation > ul > li { position: relative; float: left; margin: 0; list-style: none; } .ie7 .navigation > ul > li { height: 60px; } .navigation > ul > li > a { position: relative; display: block; padding: 18px 22px; text-align: center; color: #2706FD; font-weight: 600; font-size: 14px; font-family: 'Open Sans', Arial; text-transform: uppercase; } /* Dropdown */ .navigation ul ul { position: absolute; left: 0; z-index: 9; display: none; margin-top: -5px; padding-top: 5px; width: 180px; background-color: #f7f5ed; } .not-ie .navigation ul ul { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .navigation > ul ul:after { position: absolute; top: -8px; left: 25px; width: 13px; height: 8px; background-image: url(../images/icons/sup-arrow.png); background-repeat: no-repeat; content: ""; } .navigation ul ul { -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 4px rgba(0,0,0,.2); box-shadow: 0 0 4px rgba(0,0,0,.2); } .ie8 .navigation ul ul { behavior: url(../js/PIE.htc); box-shadow: 0 0 4px rgba(0,0,0,.1); } .navigation ul ul li {position: relative;} .navigation ul ul a { display: block; padding: 7px 20px; border-width: 0 0 1px 0; border-style: solid; border-bottom-color: #e4e3db; text-align: left; color: #FF0000; font-weight: 600; font-size: 13px; font-family: 'Open Sans', Arial; } .not-ie .navigation ul ul a { background: -moz-linear-gradient(top, #f7f5ee 0%, #eeece4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5ee), color-stop(100%,#eeece4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* IE10+ */ background: linear-gradient(to bottom, #f7f5ee 0%,#eeece4 100%); /* W3C */ } .ie8 .navigation ul ul a {background: #f7f5ee; /* Old browsers */} .navigation ul ul li:last-child > a { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .navigation > ul ul li:hover > a, .navigation > ul ul li.current-menu-item > a, .navigation > ul ul li.current-menu-parent > a, .navigation > ul ul li.current-menu-ancestor > a { background: #36332e; color: #f2f1e9 !important; } .ie8 .navigation > ul ul li:hover > a, .ie8 .navigation > ul ul li.current-menu-item > a, .ie8 .navigation > ul ul li.current-menu-parent > a, .ie8 .navigation > ul ul li.current-menu-ancestor > a { background: #36332e !important; color: #f2f1e9; } .navigation ul ul li .rightarrowclass { position: absolute; top: 50%; right: 10px; margin-top: -5px; width: 7px; height: 10px; background-image: url(../images/icons/rightarrowclass.png); background-repeat: no-repeat; } .navigation > ul ul li:hover .rightarrowclass, .navigation > ul ul li.current-menu-item .rightarrowclass, .navigation > ul ul li.current-menu-parent .rightarrowclass, .navigation > ul ul li.current-menu-ancestor .rightarrowclass {background-position: bottom;} /* Sub Dropdown */ .navigation ul ul ul { top: 0 !important; left: 175px; } .navigation ul ul ul:after {display: none;} .not-ie .navigation ul ul ul { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* Nav Responsive */ .navigation .nav-responsive { display: none; margin: 15px 0; padding: 4px 8px; width: 100%; border-color: #fff; background-color: #fff; background-image: url(../images/nav-bg.png); background-position: right center; background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Thank you in advance for the help.
×
×
  • Create New...