On clicking "about us" the contents of inner dropdown goes to the top i.e "Vision and mission","Our leadership ", "Infrastructure". I want to know how to make The contents should start from adjacent navigation item instead of starting from the top or as marked in blue highlighter.
@media only screen and (min-width:992px) { * { box-sizing: border-box; } .side-inner { display: none; } .multilevel { height: 100%; /* padding-right: 55px; */ } .multilevel-second-about li { /* position: relative; top: 50%; transform: translateY(-50%); */ position: relative; top: 15%; transform: translateY(-50%); } /* .multilevel ul li a{ animation-name: fadeInLeft; animation-duration: 2s; animation-delay: 1s; } */ html, body { margin: 0; padding: 0; /* height:100%; */ } body:before { position: absolute; content: ""; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; -webkit-transition: .3s all ease-in-out; -o-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } aside, main { height: 100%; min-height: 100%; } aside { /* width: 17%; */ /*line number*/ /* width: 25%; */ left: 0; z-index: 1001; position: fixed; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); /* background-color: #faa01b; */ -webkit-transition: 1s -webkit-transform cubic-bezier(.23, 1, .32, 1); transition: 1s -webkit-transform cubic-bezier(.23, 1, .32, 1); -o-transition: 1s transform cubic-bezier(.23, 1, .32, 1); transition: 1s transform cubic-bezier(.23, 1, .32, 1); transition: 1s transform cubic-bezier(.23, 1, .32, 1), 1s -webkit-transform cubic-bezier(.23, 1, .32, 1) } .show-sidebar aside { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%) } aside .toggle { /* padding-left: 78px; */ /*line number*/ padding-left: 12px; padding-top: 94px; position: absolute; right: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } /* @media only screen and (max-width:600px){ aside .toggle { padding-left: 6px; padding-top: 112px; } } */ .show-sidebar aside .toggle .burger:before, .show-sidebar aside .toggle .burger span, .show-sidebar aside .toggle .burger:after { background: #fff; position: relative; z-index: 99; top: 32%; right: 452%; } .show-sidebar aside { -webkit-box-shadow: 10px 0 30px 0 rgba(0, 0, 0, .1); box-shadow: 10px 0 30px 0 rgba(0, 0, 0, .1); background-color: #a91d21; } aside .side-inner { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch } aside .side-inner .profile { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #efefef } aside .side-inner .profile img { width: 80px; margin: 0 auto 20px; border-radius: 50% } aside .side-inner .profile .name { font-size: 18px; margin-bottom: 0 } aside .side-inner .profile .country { font-size: 14px; color: #cfcfcf } aside .side-inner .counter { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #efefef; text-align: center } aside .side-inner .counter div .number { display: block; font-size: 20px; color: #000 } aside .side-inner .counter div .number-label { color: #cfcfcf; } aside .side-inner .nav-menu ul, aside .side-inner .nav-menu ul li { padding: 0; margin: 0; list-style: none } aside .side-inner .nav-menu ul li a { display: block; padding-left: 30px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; font-size: 20px; color: #fff; position: relative; -webkit-transition: .3s padding-left ease; -o-transition: .3s padding-left ease; transition: .3s padding-left ease } aside .side-inner .nav-menu ul li a:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: #ff7315; opacity: 0; visibility: hidden; -webkit-transition: .3s opacity ease, .3s visibility ease, .3s width ease; -o-transition: .3s opacity ease, .3s visibility ease, .3s width ease; transition: .3s opacity ease, .3s visibility ease, .3s width ease } aside .side-inner .nav-menu ul li a:active1, aside .side-inner .nav-menu ul li a:focus, aside .side-inner .nav-menu ul li a:hover { outline: none } aside .side-inner .nav-menu ul li a:hover { background: #feecd1; color: #000 } aside .side-inner .nav-menu ul li a:hover:before { width: 4px; opacity: 1; visibility: visible } aside .side-inner .nav-menu ul li.active1 a { background: #fcfcfc; color: #000 } aside .side-inner .nav-menu ul li.active1 a:before { opacity: 1; visibility: visible; width: 4px } aside .side-inner .nav-menu ul li span img { display: block; margin: 0 auto; background-color: #fff; } .nav-menu { animation-name: bringback; animation-iteration-count: 5; } .nav-menu ul { position: relative; top: 25%; } /* .multilevel ul li:nth-child(1){ animation:bringback 1s 1s forwards 1;} .multilevel ul li:nth-child(2){animation:bringback 1s 2s forwards 1;} .multilevel ul li:nth-child(3){animation:bringback 1s 3s forwards 1;} .multilevel ul li:nth-child(4){ animation:bringback 1s 4s forwards 1;} .multilevel ul li:nth-child(5){animation:bringback 1s 5s forwards 1;} .multilevel ul li:nth-child(6){animation:bringback 1s 6s forwards 1;} .multilevel ul li:nth-child(7){animation:bringback 1s 7s forwards 1;} .multilevel ul li:nth-child(8){animation:bringback 1s 8s forwards 1;} .multilevel ul li:nth-child(9){animation:bringback 1s 9s forwards 1;} .multilevel ul li:nth-child(10){animation:bringback 1s 10s forwards 1;} .multilevel ul li:nth-child(11){animation:bringback 1s 11s forwards 1;} */ .multilevel ul li:nth-child(1) { animation: bringback 1s 1s forwards 1; } .multilevel ul li:nth-child(2) { animation: bringback 1s 1.5s forwards 1; } .multilevel ul li:nth-child(3) { animation: bringback 1s 2s forwards 1; } .multilevel ul li:nth-child(4) { animation: bringback 1s 2.5s forwards 1; } .multilevel ul li:nth-child(5) { animation: bringback 1s 3s forwards 1; } .multilevel ul li:nth-child(6) { animation: bringback 1s 3.5s forwards 1; } .multilevel ul li:nth-child(7) { animation: bringback 1s 4s forwards 1; } .multilevel ul li:nth-child(8) { animation: bringback 1s 4.5s forwards 1; } .multilevel ul li:nth-child(9) { animation: bringback 1s 5s forwards 1; } .multilevel ul li:nth-child(10) { animation: bringback 1s 5.6s forwards 1; } .multilevel ul li:nth-child(11) { animation: bringback 1s 6s forwards 1; } @keyframes bringback { to { opacity: 1; text-indent: 25px; } } /*-------------------------------------*/ .navbar-ul li { position: absolute; z-index: 1000; -webkit-animation: bringback 5s infinite; animation: bringback 5s infinite; /* color: #fff; right: 5px; */ } .navbar-ul li a { display: none; } .nav-menu { animation-name: bringback; animation-iteration-count: 5; } .nav-menu ul { position: relative; top: 25%; /* transform: translateY(-50%); */ } .dropbtn { color: white; padding: 16px; font-size: 16px; border: none; background-color: #faa01b; } .dropbtn img { width: 10px; } .dropdown { position: relative; /* display: inline-block; */ display: block; } .dropdown-content { display: none; /* position: absolute; */ background-color: #fbc26c; /* min-width: 160px; */ min-width: 100%; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropbtn .fas { color: #fff; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } main { width: calc(100%) } main .post-entry { margin-bottom: 30px } main .post-entry .custom-thumbnail { -webkit-box-flex: 0; -ms-flex: 0 0 80px; flex: 0 0 80px; margin-right: 30px } main .post-content h3 { font-size: 18px } main .post-content .post-meta { font-size: 15px; color: #ccc } .burger { width: 28px; height: 32px; cursor: pointer; position: relative; z-index: 99; float: right; /* background-color:#a91d21 ; */ /* background-color: #a91d21; */ /* padding: 15px 15px; */ padding: -15px 25px; } .burger:before, .burger span, .burger:after { width: 100%; height: 2px; display: block; /* background: #000; */ background: #fff; padding-top: 3px; border-radius: 2px; position: absolute; opacity: 1; } .burger:before, .burger:after { -webkit-transition: top .35s cubic-bezier(.23, 1, .32, 1), opacity .35s cubic-bezier(.23, 1, .32, 1), background-color 1.15s cubic-bezier(.86, 0, .07, 1), -webkit-transform .35s cubic-bezier(.23, 1, .32, 1); transition: top .35s cubic-bezier(.23, 1, .32, 1), opacity .35s cubic-bezier(.23, 1, .32, 1), background-color 1.15s cubic-bezier(.86, 0, .07, 1), -webkit-transform .35s cubic-bezier(.23, 1, .32, 1); -o-transition: top .35s cubic-bezier(.23, 1, .32, 1), transform .35s cubic-bezier(.23, 1, .32, 1), opacity .35s cubic-bezier(.23, 1, .32, 1), background-color 1.15s cubic-bezier(.86, 0, .07, 1); transition: top .35s cubic-bezier(.23, 1, .32, 1), transform .35s cubic-bezier(.23, 1, .32, 1), opacity .35s cubic-bezier(.23, 1, .32, 1), background-color 1.15s cubic-bezier(.86, 0, .07, 1); transition: top .35s cubic-bezier(.23, 1, .32, 1), transform .35s cubic-bezier(.23, 1, .32, 1), opacity .35s cubic-bezier(.23, 1, .32, 1), background-color 1.15s cubic-bezier(.86, 0, .07, 1), -webkit-transform .35s cubic-bezier(.23, 1, .32, 1); -webkit-transition: top .35s cubic-bezier(.23, 1, .32, 1), -webkit-transform .35s cubic-bezier(.23, 1, .32, 1), opacity .35s cubic-bezier(.23, 1, .32, 1), background-color 1.15s cubic-bezier(.86, 0, .07, 1); content: "" } .burger:before { top: 4px; background-color: #000; } .burger span { top: 15px; background-color: #000; } .burger:after { top: 26px; background-color: #000; } .burger:hover:before { top: 7px } .burger:hover:after { top: 23px } .burger.active1 span { opacity: 0 } .burger.active1:before, .burger.active1:after { top: 40% } .burger.active1:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=5) } .burger.active1:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=-5) } .burger:focus { outline: none } .multilevel ul li a, .multilevel ul li a ul li a, .multilevel li a, .multilevel li ul li a { /* color:#000; */ color: #fff; text-decoration: none; /* border-bottom:1px dotted #fff; */ padding: 0px 0px 13px 0px; width: 100%; display: block; height: 100%; } .multilevel ul li { padding: 20px 20px 0 20px; width: 100%; color: #000; list-style: none; font-family: 'Lato', sans-serif; font-size: 16px; font-weight: bold; } .multilevel ul { height: 100%; } .multilevel>ul { /* width:250px; */ /* background-color: #faa01b; */ background-color: #a91d21; position: relative; overflow: visible; padding-right: 20px; } .multilevel>ul>li:hover { background-color: rgba(0, 0, 0, .075); } .multilevel>ul>li>ul { display: none; position: absolute; right: -237px; top: 0; width: 250px; /* background-color:#fbb348; */ background-color: #c62227; } .multilevel>ul>li:hover>ul { display: block; } .multilevel>ul>li>ul>li:hover { background-color: rgba(0, 0, 0, .075); } .multilevel>ul>li>ul>li>ul { display: none; position: absolute; right: -250px; top: 0; width: 250px; /* background-color: #fcc676; */ /* background-color: #e04c50; */ background-color: #db2f34; } .multilevel>ul>li>ul>li:hover ul { display: block; } .multilevel>ul>li>ul>li>ul>li:hover { background-color: #db2f34; } .multilevel>ul>li>ul>li ul li ul li { /* border-bottom:1px dotted #fff; */ /* padding:20px; */ padding: 20px 20px 0 20px; } .multilevel ul li a img { height: 8px; } /* .multilevel-second-about{ position: relative; top: 22%; transform: translateY(-50%); } */ .parent li:hover { background-color: rgba(0, 0, 0, .075); } }<!--HTML--> <!--Navigation Bar--> <aside class="sidebar"> <div class="toggle"> <a href="#" class="burger js-menu-toggle" data-toggle="collapse" data-target="#main-navbar" onclick="callAnimationNav()"> <span></span> </a> </div> <!--For 992px large desktops--> <div class="multilevel"> <ul class=""> <li class=""> <img src="images/birla-logo.png" alt="Birla Logo" style="background-color: #fff;"></li> <li class=""><a tabindex="-1" href="index.html">Home</a></li> <li class=""> <!-- class="animate__animated animate__fadeInLeft animate__delay-1s"--> <a tabindex="-1" href="#">About us <img src="images/right-arrow-white.png" alt="Birla Open Minds International School"></a> <ul class=""> <li class=""><a tabindex="-1" href="aboutus.html">Vision & Mission</a></li> <li class=""><a href="aboutus.html">Our Leadership</a></li> <li class=""><a href="aboutus.html">Infrastructure</a></li> </ul> </li> <li> <!-- class="animate__animated animate__fadeInLeft animate__delay-2s"--> <a tabindex="-1" href="#">Curriculum <img src="images/right-arrow-white.png" alt="Birla Open Minds International School"> </a> <ul class=""> <li class=""><a tabindex="-1" href="beyondclassroom.html">Beyond Classroom</a></li> <li class=""> <a href="#">Academics <img src="images/right-arrow-white.png" alt="Birla Open Minds International School"></a> <ul class="parent"> <li style="padding-left: 0; padding-right: 0;"> <a href="#"> </a> <ul class="child"> <li class=""><a href="curriculumpreprimary.html"> Pre-Primary</a></li> <li class=""><a href="curriculumprimary.html">Primary</a> </li> <li class=""><a href="curriculummiddle.html"> Middle</a></li> <li class=""><a href="curriculumsecondary.html"> Secondary</a> </li> </ul> </li> </ul> </li> </ul> </li> <!-- <li><a href="criteria.html">Criteria</a></li> class="animate__animated animate__fadeInLeft animate__delay-3s"--> <li> <!--class="animate__animated animate__fadeInLeft animate__delay-4s"--> <a tabindex="-1" href="#">Admissions <img src="images/right-arrow-white.png" alt="Birla Open Minds International School"></a> <ul class=""> <li class=""><a tabindex="-1" href="whybomis.html">Why Bomis</a></li> <li class=""><a href="admissionprocess.html">Admission Process</a></li> <li class=""><a href="criteria.html">Admission Criteria</a></li> <li class=""><a href="enquirenow.html">Enquiry Form</a></li> </ul> </li> <li><a href="careers.html">Careers</a></li> <!-- class="animate__animated animate__fadeInLeft animate__delay-5s"--> <li><a href="gallery.html">Gallery</a></li> <!-- class="animate__animated animate__fadeInLeft" style="animation-duration: 6s;" --> <li><a href="contactus.html">Contact us </a></li> <!-- class="animate__animated animate__fadeInLeft" style="animation-duration: 7s;"--> <li><a href="enquirenow.html">Enquire Now</a></li> <!--class="animate__animated animate__fadeInLeft" style="animation-duration: 8s;"--> </ul> </div> </aside>
没有评论:
发表评论