Difference between revisions of "Template:William and Mary/NAV BAR"

Line 3: Line 3:
  
 
<style>
 
<style>
−
 
 
.dropdown {
 
.dropdown {
−
  z-index: 9999;
+
    position: relative;
−
 
+
    display: inline-block;
 
}
 
}
−
.dropdown-menu{
+
 
−
display: none;
+
.dropdown-content {
 +
    display: none;
 
     position: absolute;
 
     position: absolute;
 
     background-color: #f9f9f9;
 
     background-color: #f9f9f9;
 
     min-width: 160px;
 
     min-width: 160px;
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
    padding: 12px 16px;
 
 
     z-index: 1;
 
     z-index: 1;
 
}
 
}
  
−
#wnm-top-nav ul {
+
.dropdown-content a {
−
  margin: 0 0 0 0;
+
    color: black;
−
} 
+
    padding: 12px 16px;
−
#wnm-top-nav li {
+
    text-decoration: none;
−
  margin: 0 0 0 0;
+
    display: block;
−
}  
+
}
  
−
#wnm-top-nav li {
+
.dropdown-content a:hover {background-color: #f1f1f1}
−
  display: inline-block;
+
 
−
}
+
.dropdown:hover .dropdown-content {
−
#wnm-top-nav li:hover {
+
    display: block;
−
  background: #ECECEC;
+
−
}
+
−
#wnm-top-nav li:hover ul {
+
−
  display: block;
+
−
}
+
−
#wnm-top-nav li ul {
+
−
  position: absolute;
+
−
  width: 150px;
+
−
  display: none;
+
−
font-size: 15px;
+
−
}
+
−
#wnm-top-nav li ul li {
+
−
  background: #ECECEC;
+
−
  display: block;  
+
 
}
 
}
−
#wnm-top-nav li ul li a {display:block !important;}
 
−
#wnm-top-nav li ul li:hover {background: #E8E8E8;}
 
 
</style>
 
</style>
  
Line 59: Line 42:
 
<li class="active"><a href="https://2018.igem.org/Team:William_and_Mary">Home</a></li>
 
<li class="active"><a href="https://2018.igem.org/Team:William_and_Mary">Home</a></li>
 
<li class="dropdown"><a id = "wnm-top-nav" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Project<span class="caret"></span></a>
 
<li class="dropdown"><a id = "wnm-top-nav" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Project<span class="caret"></span></a>
−
                                   <ul style="top:70px" class="dropdown-menu">
+
                                   <ul style="top:70px" class="dropdown-content">
 
                                         <li><a href="#">Freezing Cells</a></li>
 
                                         <li><a href="#">Freezing Cells</a></li>
 
                                         <li><a href="#">3G Assembly</a></li>
 
                                         <li><a href="#">3G Assembly</a></li>

Revision as of 15:15, 5 July 2018