Bootstrap Snippet pure css menu using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"pure css menu"
Bootstrap 3.3.0 Snippet by quaisar

Related: See More

Questions / Comments:

"pure css menu" Bootstrap 3.3.0 Snippet by quaisar

Related: See More

Questions / Comments:

"pure css menu"
Bootstrap 3.3.0 Snippet by quaisar