Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="nav-wrap">
- <ul>
- <li id="link-one" class="orange">
- <a href="#" class="parent-one-link"><span>Test</span></a>
- <div class="subnav">
- <ul>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- </ul>
- </div><!-- /.subnav -->
- </li>
- <li class="red"><a href="#"><span>Test</span></a></li>
- <li class="pink"><a href="#"><span>Test</span></a></li>
- <li class="purple"><a href="#"><span>Test</span></a></li>
- <li class="blue"><a href="#"><span>Test</span></a></li>
- <li class="green"><a href="#"><span>Test</span></a></li>
- <li class="yellow-facebook"><a href="#"><span></span></a></li>
- </ul>
- </div> <!-- nav-wrap -->
- #nav-wrap .doubleLine {
- display: table-cell;
- line-height: 1.2em;
- width:65.275%;
- }
- #nav-wrap {
- width:100%;
- height:100px;
- font-weight:500;
- padding: 0;
- left:0;
- font-family: 'Raleway', Arial, sans-serif;
- z-index:100;
- float:left;
- }
- #nav-wrap ul {
- list-style-type: none;
- margin: 0;
- padding:0;
- text-transform: uppercase;
- }
- #nav-wrap ul li {
- width:14.275%; /* ~(100/7) */
- display:block;
- float:left;
- text-align:center;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- #nav-wrap ul li + li {
- border-left: 1px #fff solid !important;
- }
- #nav-wrap ul li a {
- width:100%;
- display: block;
- height: 100%;
- position: relative;
- color:#FFFFFF !important;
- text-decoration:none;
- }
- #nav-wrap ul li span {
- display: inline-block;
- vertical-align: middle;
- height: 100px;
- font-size:1.45em;
- text-align: center;
- padding: 0 5% 0 5%; /* was 0 20px */
- line-height: 100px;
- }
- #nav-wrap ul li.yellow-facebook {
- width:14.275%;
- }
- #nav-wrap ul li.yellow-facebook a {
- background-size:130px 26px; /* > 25px */
- }
- li .subnav {
- display: none;
- /*position: absolute; */
- clear: both;
- margin-left: 0;
- font-size:0.9em;
- }
- .subnav ul {
- margin-left: 0;
- float:left;
- padding:0;
- width:100%;
- }
- .subnav ul li {
- margin: 0 0 0 0;
- width:100% !important;
- height:23px;
- float:none !important;
- }
- .subnav ul li a {
- padding: 10px 0 3px 0;
- /*background-image: url(../images/submenu-background-divider.png);
- background-repeat:no-repeat;
- background-position:left;*/
- }
- #nav-wrap .subnav ul li + li {
- border-left: none !important;
- }
- .subnav {
- width:100%;
- padding: 0;
- margin: 0.05% 0 0 0;
- border-top:#FFF 1px solid;
- }
- .subnav ul li a:link, a:active, a:visited {
- text-decoration:none;
- }
- .subnav ul li a:hover {
- color:#000;
- text-decoration:none;
- }
- li:hover > .subnav {display:inline-block; left:0;}
- #nav-wrap ul li.orange a {
- background-color:#f37028;
- }
- #nav-wrap ul li.orange a:hover {
- color: #231f20 !important;
- }
- #nav-wrap ul li.red a {
- background-color:#ed1b24;
- }
- #nav-wrap ul li.red a:hover {
- color: #231f20 !important;
- }
- #nav-wrap ul li.pink a {
- background-color:#e54198;
- }
- #nav-wrap ul li.pink a:hover {
- color: #231f20 !important;
- }
- #nav-wrap ul li.purple a {
- background-color:#6b439c;
- }
- #nav-wrap ul li.purple a:hover {
- color: #231f20 !important;
- }
- #nav-wrap ul li.blue a {
- background-color:#0193cf;
- }
- #nav-wrap ul li.blue a:hover {
- color: #231f20 !important;
- }
- #nav-wrap ul li.green a {
- background-color:#80c02c;
- }
- #nav-wrap ul li.green a:hover {
- color: #231f20 !important;
- }
- #nav-wrap ul li.yellow-facebook a {
- background-color:#fff300;
- background-image:url(../images/social-media/facebook-text.png);
- background-repeat:no-repeat;
- background-position:center;
- }
- #nav-wrap ul li.yellow-facebook a:hover {
- color: #231f20;
- background-image:url(../images/social-media/facebook-text_over.png);
- }
- li:hover > .subnav {
- display:inline-block;
- left:0;
- -webkit-transition: all 0.4s ease-in;
- -moz-transition: all 0.4s ease-in;
- -o-transition: all 0.4s ease-in;
- transition: all 0.4s ease-in;
- opacity:1.0;
- }
- li .subnav {
- opacity:0;
- /*position: absolute; */
- clear: both;
- margin-left: 0;
- font-size:0.9em;
- }
- transform: translate3d(0, 0, 0);
- -webkit-backface-visibility: hidden;
- -webkit-perspective: 1000;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement