If you are looking for CSS dropdown then this will be the best dropdown menu,
where only the CCS styles are being used.
CSS Code:
<style> /* ONLY CSS dropdown menus. */ #nav { margin: 0; padding: 0; height: 1em; } #nav li { list-style: none; float: left; } #nav li a { display: block; padding: 3px 8px; background-color: #ff0000; color: #fff; text-decoration: none; border-left:#fff 1px solid; } #nav li a:hover { background:#000} #nav li ul { display: none; width: 10em; background-color: #333;} #nav li:hover ul, #nav li.hover ul { display: block; position: absolute; margin: 0; padding: 0; } #nav li:hover li, #nav li.hover li { float: none; } #nav li:hover li a, #nav li.hover li a { background-color: #ff0000; border-top: 1px solid #fff; color: #fff; } #nav li li a:hover { background-color: #000; } </style>
HTML Code:
<div id="wrap"> <h1>CSS Dropdown Menu</h1> <ul id="nav"> <li><a href="#">Menu Item 1</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li><a href="#">Menu Item 2</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li><a href="#">Menu Item 3</a></li> <li><a href="#">Menu Item 4</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div>
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.
ReplyDelete