Line 11: | Line 11: | ||
/********************************* MENU ********************************/ | /********************************* MENU ********************************/ | ||
+ | /*********************new menu*******************/ | ||
.clearfix:after { | .clearfix:after { | ||
display:block; | display:block; | ||
clear:both; | clear:both; | ||
} | } | ||
+ | |||
+ | .menu-wrap { | ||
+ | width:100%; | ||
+ | box-shadow:0px 1px 3px rgba(0,0,0,0.2); | ||
+ | background:#3e3436; | ||
+ | } | ||
+ | |||
+ | .menu { | ||
+ | width:1000px; | ||
+ | margin:0px auto; | ||
+ | } | ||
+ | |||
+ | .menu li { | ||
+ | margin:0px; | ||
+ | list-style:none; | ||
+ | font-family:'Ek Mukta'; | ||
+ | } | ||
+ | |||
+ | .menu a { | ||
+ | transition:all linear 0.15s; | ||
+ | color:#919191; | ||
+ | } | ||
+ | |||
+ | .menu li:hover > a, .menu .current-item > a { | ||
+ | text-decoration:none; | ||
+ | color:#be5b70; | ||
+ | } | ||
+ | |||
+ | .menu .arrow { | ||
+ | font-size:11px; | ||
+ | line-height:0%; | ||
+ | } | ||
+ | |||
+ | /*----- Top Level -----*/ | ||
+ | .menu > ul > li { | ||
+ | float:left; | ||
+ | display:inline-block; | ||
+ | position:relative; | ||
+ | font-size:19px; | ||
+ | } | ||
+ | |||
+ | .menu > ul > li > a { | ||
+ | padding:10px 40px; | ||
+ | display:inline-block; | ||
+ | text-shadow:0px 1px 0px rgba(0,0,0,0.4); | ||
+ | } | ||
+ | |||
+ | .menu > ul > li:hover > a, .menu > ul > .current-item > a { | ||
+ | background:#2e2728; | ||
+ | } | ||
+ | |||
+ | /*----- Bottom Level -----*/ | ||
+ | .menu li:hover .sub-menu { | ||
+ | z-index:1; | ||
+ | opacity:1; | ||
+ | } | ||
+ | |||
+ | .sub-menu { | ||
+ | width:160%; | ||
+ | padding:5px 0px; | ||
+ | position:absolute; | ||
+ | top:100%; | ||
+ | left:0px; | ||
+ | z-index:-1; | ||
+ | opacity:0; | ||
+ | transition:opacity linear 0.15s; | ||
+ | box-shadow:0px 2px 3px rgba(0,0,0,0.2); | ||
+ | background:#2e2728; | ||
+ | } | ||
+ | |||
+ | .sub-menu li { | ||
+ | display:block; | ||
+ | font-size:16px; | ||
+ | } | ||
+ | |||
+ | .sub-menu li a { | ||
+ | padding:10px 30px; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .sub-menu li a:hover, .sub-menu .current-item a { | ||
+ | background:#3e3436; | ||
+ | } | ||
+ | |||
+ | |||
/* Wrapper for the menu */ | /* Wrapper for the menu */ | ||
− | . | + | .menu_wrapper { |
− | + | width:100%; | |
+ | margin-top:-10px; | ||
+ | margin-left:-20px; | ||
+ | height:0px; | ||
+ | position:fixed; | ||
+ | padding:0px; | ||
+ | display:inline; | ||
+ | list-style: none; | ||
box-shadow:0px 1px 3px rgba(0,0,0,0.2); | box-shadow:0px 1px 3px rgba(0,0,0,0.2); | ||
− | + | } | |
− | + | ||
− | + | ||
Line 479: | Line 570: | ||
</div> | </div> | ||
--!> | --!> | ||
+ | |||
+ | |||
+ | <div class="menu-wrap"> | ||
+ | <nav class="menu"> | ||
+ | <ul class="clearfix"> | ||
+ | <li><a href="#">Home</a></li> | ||
+ | <li> | ||
+ | <a href="#">Movies <span class="arrow">▼</span></a> | ||
+ | |||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="#">In Cinemas Now</a></li> | ||
+ | <li><a href="#">Coming Soon</a></li> | ||
+ | <li><a href="#">On DVD/Blu-ray</a></li> | ||
+ | <li><a href="#">Showtimes & Tickets</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">T.V. Shows</a></li> | ||
+ | <li class="current-item"><a href="#">Photos</a></li> | ||
+ | <li><a href="#">Site Help</a></li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | </div> | ||
<div class="content_wrapper"> | <div class="content_wrapper"> |
Revision as of 04:58, 18 October 2016