CSS过渡内联菜单

Question

I need to do inline menu with transition.

I tried to recode some example into my requirement, but I have a problem with a:hover class - maybe some problem in js class.

But I have no idea how to get a red background under the main link (dropdbtn class) while I scrolling to submenu.

 $(document).ready(function() { console.log("ready!"); $(".dropdown-content").mouseenter(function() { $(this).prev().addClass('href-hovered'); }) $(".dropdown-content").mouseleave(function() { $(this).prev().removeClass('href-hovered'); }) }); 

 .nav { width: 1200px !important; height: 50px; padding-bottom: 20px; list-style: none; margin: 0; padding: 0; } .nav ul { margin: 0; padding: 0; list-style: none; display: table; } .nav a.dropbtn { display: block; line-height: 1.5em; color: #BCF1F3; font-family: 'webfont'; font-size: 1.5em; width: 170px; } .nav a.dropbtn:hover { display: block; //padding:20px 40px; line-height: 1.5em; color: #BCF1F3; font-family: 'webfont'; font-size: 1.5em; width: 170px; background: red; } .nav ul:before, .nav ul:after { content: ""; display: table; } .nav ul:after { clear: both; } .dropdown { float: left; background: white; position: relative; width: 170px; min-height: 50px; } .dropdown > a { color: black; display: block; padding: 12px 24px; text-decoration: none; } .dropdown > a:hover { color: black; background: red; display: block; padding: 12px 24px; text-decoration: none; } .dropdown .dropdown-content { position: absolute; transform: translate3d(0, -100%, 0); transition: transform .2s ease-in; z-index: -1; left: 0; } .dropdown:hover .dropdown-content { transform: translate3d(0, 0, 0); transition-duration: .4s; transition-timing-function: ease-out; z-index: 1; } .dropdown-content { background: red; list-style: none; width: 170px; white-space: nowrap; } .dropdown-content a { display: block; padding: 12px 24px; color: #fff; text-decoration: none; z-index: 100 !important; } .nav .red { color: #ff6600; font-family: 'webfont'; font: 1.8em; } .nav .green { color: #00cccc; font-family: 'webfont'; } .nav a:hover .red { color: white; padding-top: 20px; font-family: 'webfont'; } .nav a:hover .green { color: white; font-family: 'webfont'; } .nav a.dropbtn.href-hovered .green { color: white; font-family: 'webfont'; background: red; width: 170px; height: 50px; } .nav a.dropbtn.href-hovered .red { color: white; padding-top: 20px; z-index: 2; font-family: 'webfont'; background: red; width: 170px; height: 50px; } .nav a:hover .red, a:hover .green { color: white; font-family: 'webfont'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav"> <ul> <li class='dropdown'><a class="dropbtn" href="#"><span class="red">nav</span><br><span class="green">1</span></a> <ul class="dropdown-content"> <li><a href="http://localhost/?page_id=19">Sub_nav</a> </li> <li><a href="http://localhost/?page_id=304">Sub_nav</a> </li> <li><a href="http://localhost/?page_id=340">Sub_nav</a> </li> <li><a href="http://localhost/?page_id=306">Sub_nav</a> </li> <li><a href="http://localhost/?page_id=60">Sub_nav</a> </li> </ul> </li> </ul> <nav> 

Answer 1

As Mihailo said, your menu is kind of chaotic and overly complex. But to achieve your requirement, just change the style definition

nav a.dropbtn:hover

to

nav:hover a.dropbtn

to have the rule applied when the nav block itself is hovered.

Answer 2

Just added background-color: red; to .nav a.dropbtn . If im correct in understanding this is what you want right?