Use div and CSS as drop-down menus

What we bring to you today is a universal Web-compliant CSS drop-down navigation menu layout and CSS drop-down menu template that no matter what website is likely to use! Just save it!  <ul id= "NAV" > <li><a href= "http://www.divcss5.com/" >div+css</a> <ul> <li><a href= "http://www.divcss5.com/" >CSS</a></li> <li><a href= "#" > Product one </a></li> & Lt;li><a href= "#" > Product one </a></li> <li><a href= "#" > Product one </a></li> <li&gt ; <a href= "#" > Product one </a></li> <li><a href= "#" > Product one </a></li> </ul> </ li> <li><a href= "http://www.divcss5.com/rumen/" >css Getting Started </a> <ul> <li><a href= "#" > Entry one </a></li> <li><a href= "#" > Getting Started two </a></li> <li><a href= "#" > Getting Started II & Lt;/a></li> <li><a href= "#" > Getting Started II two </a></li> <li><a href= "#" > Getting Started two getting started two     </a></li> <li><a href= "#" > Getting Started two </a></li></ul> </li> <li><a href= "http://www.divcss5.com/html/" >html Basics </a> <ul> <li& Gt;<a href= "#" > Basic three </a></li> <li><a href= "#" > Basics </a></li> <li><a href= "#" > Basic three Cases three </a></li> <li><a href= "#" > Basic three case three case three </a></li> </ul> &lt ;/li> <li><a href= "http://www.divcss5.com/jiqiao/" >div+css tips </a> <ul> <li><a h ref= "#" > Tips four </a></li> <li><a href= "#" > Tricks four </a></li> <li><a href= "#" & gt; tips four </a></li> <li><a href= "#" > Tricks four 111</a></li> </ul> </li> <l I><a href= "http://www.divcss5.com/template/" >div+css templates </a> <ul> <li><a href= "/http/ www.divcss5.com/template/">css templates </a></li> <li><a href=" # "> Templates </a></li> < Li><a href= "#" > dieBoards </a></li> <li><a href= "#" > Template templates </a></li> <li><a href= "#" > Template Template Templates &lt ;/a></li> <li><a href= "#" > Template template </a></li> <li><a href= "#" > Template Template </a&gt ;</li> <li><a href= "#" > Template Template Template Template </a></li> </ul> </li> <li><a HRE f= "http://www.divcss5.com/shouce/" >css manual </a> <ul> <li><a href= "Http://www.divcss5.com/sho uce/">div+css manual </a></li> <li><a href=" # "> Manuals </a></li> <li><a href=" # > Manuals </a></li> <li><a href= "#" > Manuals </a></li> <li><a href= "#" > Manual &L T;/a></li> <li><a href= "#" > Manual manual </a></li> <li><a href= "#" > Manual manual </a ></li> </ul> </li> </ul>

CSS Code and JS code:

<style type= "TEXT/CSS" >/* www.divcss5.com CSS drop-down menu instance */*{margin:0;padding:0;border:0} body{font-family:arial, Song body, serif;  FONT-SIZE:12PX} #nav {line-height:24px; List-style-type:none; Background: #666} #nav a{display:block; width:80px; Text-align:center} #nav a:link {color: #666; Text-decoration:none} # Nav a:visited {color: #666; Text-decoration:none} #nav a:hover {color: #FFF; Text-decoration:none;font-weight:bold} #nav  Li{float:left; width:80px; background: #CCC} #nav li a:hover{background: #999} #nav li ul{line-height:27px; List-style-type:none;text-align:left;left: -999em; width:180px; Position:absolute} #nav li ul li{float:left width:180px;background: #EFEFEF} #nav li ul a{display:block; width:156p x;text-align:left;padding-left:24px; Overflow:hidden} #nav li ul a:link {color: #666; text-decoration:none} #nav li ul a:visited {color: #666; text-decoration:no NE} #nav li ul a:hover {color: #F3F3F3; text-decoration:none;font-weight:normal;background: #C00} #nav Li:hoVer Ul{left:auto} #nav li.sfhover Ul{left:auto} #content {clear:left} </style> <script Type=text/javascript&gt  ;     function Menufix () {var sfels = document.getElementById ("Nav"). getElementsByTagName ("Li"); for (var i=0; i<sfels.length; i++) {sfels[i].onmouseover=function () {this.classname+= (This.className.leng Th>0?         "": "") + "Sfhover"; } sfels[i].onmousedown=function () {this.classname+= (this.classname.length>0?         "": "") + "Sfhover"; } sfels[i].onmouseup=function () {this.classname+= (this.classname.length>0?         "": "") + "Sfhover"; } sfels[i].onmouseout=function () {Thisthis.classname=this.classname.replace (new RegExp (? |        ^) (sfhover\\b ")," "); }}}window.onload=menufix; </script>

The above is the plain CSS drop-down menu layout code and description in the Div+css template.

If you need a friend, just save it.

Related reading:

How to implement responsive layouts

How to use CHECKBO in HTML

How to write a dashed border with CSS