over 7 years ago
Hello Reader ! Here is an example how to make a simple dropdown navigation menu using css3 and i also showing you how to use transition attribute of css3 . I hope this example will help you .
--Html--
<ul><li>Home</li> <li>About</li> <li> Portfolio <ul> <li>Web Design</li> <li>Web Development</li> <li>Illustrations</li> </ul> </li> <li>Blog</li> <li>Contact</li> </ul>
--CSS--
body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 20px 50px 150px; font-size: 13px; text-align: center; background: #E3CAA1; } ul { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } ul li:hover { background: #555; color: #fff; } ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } ul li ul li:hover { background: #666; } ul li:hover ul { display: block; opacity: 1; visibility: visible; }
Good one BUDDY !!!!
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
1 Comment(s)