Home » Snippets » Black-Base CSS Dropdown Black-Base CSS Dropdown - Snippet --- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart --- Bootstrap Foundation Animate.css Preview HTML CSS JS <ul class="dropdown"> <li><a href="#">Option One</a></li> <li><a href="#">Option Two</a></li> <li><a href="#">Option Three</a></li> </ul> .dropdown { background: #f9f9f9; background-image: -webkit-linear-gradient(top, #f9f9f9, #e9e9e9); background-image: -moz-linear-gradient(top, #f9f9f9, #e9e9e9); background-image: -ms-linear-gradient(top, #f9f9f9, #e9e9e9); background-image: -o-linear-gradient(top, #f9f9f9, #e9e9e9); background-image: linear-gradient(to bottom, #f9f9f9, #e9e9e9); background-repeat: no-repeat; border: 1px solid #c0c0c0; border-bottom: 1px solid #b6b6b6; border-top: 1px solid #c9c9c9; border-radius: 4px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 #fff; -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 #fff; margin: 50px auto; outline: none; padding: 5px 0; position: relative; width: 150px; z-index: 10000; list-style: none; } /* Top Arrow Border */ .dropdown:before { border-color: #c0c0c0 transparent; border-style: solid; border-width: 0 8px 8px; content: ""; display: block; left: 25px; position: absolute; top: -8px; width: 0; } /* Top Arrow */ .dropdown:after { border-color: #f9f9f9 transparent; border-style: solid; border-width: 0 8px 8px; content: ""; display: block; left: 25px; position: absolute; top: -7px; width: 0; } .dropdown a { border-top: 1px solid transparent; border-bottom: 1px solid transparent; color: #777; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; line-height: 1; margin: 0; padding: 6px 10px; text-shadow: 0 1px 0 #fff; text-decoration: none; } .dropdown a:hover { background: #444; background-image: -webkit-linear-gradient(top, #595959, #444); background-image: -moz-linear-gradient(top, #595959, #444); background-image: -ms-linear-gradient(top, #595959, #444); background-image: -o-linear-gradient(top, #595959, #444); background-image: linear-gradient(to bottom, #595959, #444); background-repeat: no-repeat; border-top: 1px solid #444; border-bottom: 1px solid #393939; color: #eee; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } Tutorials Palace 10 January, 2019 No Comments 220 Views Black-Base CSS Dropdown CSS Navigation Menu CSS Navigation Menu Download Black-Base CSS Dropdown Code Fullscreen Tutor Play Walkthrough Related Snippets Box Shadow Editor Canvas Particles Emission Dripping Paint CSS3 Animation National flag of Mongolia Particles Emission Based on Mouse Moves Custom Cursor Images with CSS Particle System Leaving Trails CSS3 LT Form Particles Gravity Effect Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Name * Email * Website Notify me of new posts by email.