Comparison between pure CSS drop-down navigation and jquery drop-down navigation

Comparison between pure CSS drop-down navigation and jquery drop-down navigation

Pure css Implementation of the drop-down navigation demo: http://codepen.io/tianzi77/pen/xGOyxp
You do not need javascript or jquery dynamic effects to pull down the navigation bar. The implementation of pure css attributes is mainly applied to left: auto and left:-9999px in absolute positioning to hide or display the drop-down menu when the mouse passes.
Htm structure:

• Xiao Zhe
• Xiao Zhe
• Xiao Zhe
  • Xiao Zhe
  • Xiao Zhe
  • Xiao Zhe

Css style:

Body {font-family:; font-size: 1.4em; margin-top: 4em;} ul. nav, ul. nav ul {margin: 0; padding: 0; list-style-type: none; float: left; border: 1px solid #486B02; background-color: #8BD400;} ul. nav li {float: left; width: 8em; text-align: center;} ul. nav li ul {position: absolute; width: 8em; left:-999em; margin-left:-1px ;}. nav li: hover ul {left: auto;} ul. nav a {display: block; color: #2B3F00; text-decoration: none; padding: 0.3em 1em; border-right: 1px solid #486B02; border-left: 1px solid # E4FFD3; */} ul. nav li a {border-top: 1px solid # E4FFD3; border-bottom: 1px solid #486B02; border-left: 0; border-right: 0; text-align: center;} ul. nav li: last-child a {border-right: 0; border-bottom: 0;} ul a: hover, ul a: focus {color: # E4FFD3; background-color: #6DA203 ;}

Another method is to use css and jquery to implement some more cool drop-down menu navigation Bars:
Demo: http://codepen.io/tianzi77/pen/Pqzywv

Html structure:

• Homepage
• Tianzi
  • tianzi
  • tianzi
  • tianzi
• Service
  • liuzhe
  • liuzhe
• About
• Contact

Style:

* {Padding: 0; margin: 0;} ul # navigation {list-style-type: none; background: orange; height: 63px; font-size: 24px; width: 1000px; border-radius: 50px; margin: 50px auto;} ul # navigation li {float: left; width: 175px; text-align: center; position: relative; height: 63px; padding: 20px 2px 10px 5px;} ul # navigation li a {color: # fff; text-decoration: none; display: block; font-family: ;} ul # navigation li. active {color: yellow;} ul # navigation li ul. subnav {background: # e7f1d2; width: 175px; clear: both; display: none; position: absolute; top: 63px; border-radius: 10px; border-left: 2px solid #998; border-right: 2px solid #998; border-bottom: 2px solid #998; list-style-type: none;} ul # navigation li ul. subnav li {clear: both; height: 40px; padding: 0; text-align: center; margin: 0px;} ul # navigation li ul. subnav li a {background: none; font-size: 18px; color: #333; text-decoration: none; padding: 10px 0; border: none ;} ul # navigation li ul. subnav li a: hover {background: # dbf1ad; font-size: 18px; color: #333; border-radius: 10px ;}

Jquery dynamic effects:

$(function(){
$(#navigation li).hover(function(){
$(this).find(.subnav).slideDown(slow);
$(this).find(a).addClass(active);
},
function(){
$(this).find(.subnav).slideUp(fast);
$(this).find(a).removeClass(active);
})
})

: