"pure css menu"
Bootstrap 3.3.0 Snippet by quaisar

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <nav class="menu" id="cssmenu"> <ul> <li class="active"><a href='index.php'>Home</a></li> <li class='has-sub'><a href='what-we-buy.php'>What We Buy</a> <ul> <li><a href='cash-for-diamond.php'>Cash For Diamonds</a></li> <li><a href='sell-my-diamond.php'>Sell My Diamond</a></li> <li><a href='sell-diamond-ring.php'>Sell Diamond Ring</a></li> <li><a href='diamond-appraisal-nyc.php'>Diamond appraisal NYC</a></li> <li><a href='jewelry-appraisal-nyc.php'>Jewelry Appraisal NYC</a></li> <li><a href='cash-for-engagement-ring.php'>Cash for Engagement Ring</a></li> <li><a href='engagement-ring-buyer.php'>Engagement Ring Buyer</a></li> <li><a href='wedding-ring-buyer.php'>Wedding Ring Buyer</a></li> <li><a href='diamond-buyer.php'>Diamond Buyer</a></li> </ul> </li> <li class='has-sub'><a href='diamond-education.php'>Diamond Education</a> <ul> <li><a href='diamond-shape.php'>Diamond Shapes</a></li> </ul> </li> <li class='has-sub'><a href='how-it-work.php'>How it Works?</a> <ul> <li><a href='where-to-sell.php'>Where To Sell My Engagement Ring</a></li> </ul> </li> <li class='has-sub'><a href='#'>Precious Metal Education</a> <ul> <li><a href='certified.php'>Certified</a></li> <li><a href='metal-jewelry-making.php'>Metals in Jewelry Making</a></li> <li class='has-sub'><a href='precious-metal-platinum.php'>Precious Metal Platinum</a> <ul> <li><a href='where-to-sell.php'>Where To Sell My Engagement Ring</a></li> </ul> </li> <li><a href='precious-metal-silver.php'>Precious Metal Silver</a></li> </ul> </li> <li><a href='pawning.php'>Pawning</a></li> <li class='has-sub'><a href='contact.php'>Contact us</a> <ul> <li><a href='local-diamond-buyer.php'>Local Diamond Buyer</a></li> <li><a href='place-that-buy-diamond.php'>Place that buy diamonds</a></li> </ul> </li> </ul> </nav> </div> </div>
#cssmenu { padding: 0; margin: 0; border: 0; line-height: 1; } #cssmenu ul, #cssmenu ul li, #cssmenu ul ul { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; float: left; } #cssmenu ul li { float: left; min-height: 1px; line-height: 1em; vertical-align: middle; position: relative; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0px; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: -2px; right: 0; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { top: 1px; left: 99%; } #cssmenu ul li { float: none; } #cssmenu ul ul { margin-top: 1px; } #cssmenu ul ul li { font-weight: normal; } /* Custom CSS Styles */ #cssmenu { width: 200px; background: #373A47; zoom: 1; font-size: 12px; } #cssmenu:before { content: ''; display: block; } #cssmenu:after { content: ''; display: table; clear: both; } #cssmenu a { display: block; padding: 15px 20px; color: #ffffff; text-decoration: none; text-transform: uppercase; } #cssmenu > ul { width: 248px; } #cssmenu ul ul { width: 220px; } #cssmenu > ul > li > a { border-right: 0px solid #1b9bff; color: #ffffff; } #cssmenu > ul > li > a:hover { color: #ffffff; } #cssmenu > ul > li.active a { background: #29ABE1; } #cssmenu > ul > li a:hover, #cssmenu > ul > li:hover a { background: #29ABE1; } #cssmenu li { position: relative; } #cssmenu ul li.has-sub > a:after { content: '+'; position: absolute; top: 50%; right: 15px; margin-top: -6px; } #cssmenu ul ul li.first { -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } #cssmenu ul ul li.last { -webkit-border-radius: 0 0 3px 0; -moz-border-radius: 0 0 3px 0; border-radius: 0 0 3px 0; border-bottom: 0; } #cssmenu ul ul { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } #cssmenu ul ul { border: 1px solid #0082e7; } #cssmenu ul ul a { font-size: 12px; color: #ffffff; } #cssmenu ul ul a:hover { color: #ffffff; } #cssmenu ul ul li { border-bottom: 1px solid #0082e7; } #cssmenu ul ul li:hover > a { background: #29ABE1; color: #ffffff; } #cssmenu.align-right > ul > li > a { border-left: 4px solid #29ABE1; border-right: none; } #cssmenu.align-right { float: right; } #cssmenu.align-right li { text-align: right; } #cssmenu.align-right ul li.has-sub > a:before { content: '+'; position: absolute; top: 50%; left: 15px; margin-top: -6px; } #cssmenu.align-right ul li.has-sub > a:after { content: none; } #cssmenu.align-right ul ul { visibility: hidden; position: absolute; top: 0; left: -100%; z-index: 598; width: 100%; } #cssmenu.align-right ul ul li.first { -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; } #cssmenu.align-right ul ul li.last { -webkit-border-radius: 0 0 0 3px; -moz-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; } #cssmenu.align-right ul ul { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; }

Related: See More


Questions / Comments:

I like it ! Mainly because the submenu is touching the main menu and I can keep focus with my mouse unlike so any others where I have to retry a few times becaus e the whole thing goes away when your mouse / cursor slips is transitioning between them and they have the timing set too fast like One on a Wordpress theme I just installed had to try 3 times to successfully get to a sub page after I built the site but the customer wants that theme so i have to tweak it lol

Stan Williams () - 7 years ago - Reply 0