Template:Aquila

From 2012hs.igem.org

(Difference between revisions)
(Undo revision 1311 by Fzhou1995 (talk))
Line 63: Line 63:
}
}
 +
#navbar
-
 
+
ul.navbar
-
#navbar  
+
{
{
     float:left;
     float:left;
Line 72: Line 72:
     margin:0;
     margin:0;
     list-style-type:none;
     list-style-type:none;
 +
    height: 1em;
}
}
-
#navbar a  
+
ul.navbar a  
{
{
     float:left;
     float:left;
Line 86: Line 87:
}
}
-
#navbar a:hover  
+
ul.navbar a:hover  
{
{
     background-color:#A3ABAE;
     background-color:#A3ABAE;
}
}
-
#navbar li  
+
ul.navbar li  
{
{
     position:relative;
     position:relative;
Line 97: Line 98:
}
}
-
#long
+
ul.navbar li a
{
{
-
     width:10em;
+
     display: block;
 +
    padding: 3px 8px;
 +
    background-color: #000000;
 +
    color:#fff
 +
    text-decoration: none;
}
}
-
 
+
ul.navbar li ul
-
.navbar  
+
{
{
-
     padding:0 20px;
+
     display: none;
 +
    width: 10em;
 +
    background-color: #000;
}
}
-
/*--- DROPDOWN ---*/
+
ul.navbar li:hover li, ul.navbar li.hover li
-
 
+
-
#navbar ul
+
{
{
-
     background:#fffff;
+
     float: none;
-
    background:rgba(255,255,255,0);
+
-
    list-style:none;
+
-
    position:absolute;
+
-
    left:-9999px;  
+
}
}
-
#navbar ul li
+
ul.navbar li:hover li a, ul.navbar li.hover li a
{
{
-
     padding-top:1px;  
+
     background-color: #FFF;
-
     float:none;
+
     border-bottom: 1 px solid #FFF;
 +
    color: #000;
}
}
-
#navbar a
+
ul.navbar li li:hover
{
{
-
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
+
    background-color: #000000;
}
}
-
#navbar li:hover ul
+
#long
-
{ /* Display the dropdown on hover */
+
{
-
left:0; /* Bring back on-screen when needed */
+
    width:10em;
-
}
+
-
#navbar li:hover a
+
-
{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
+
-
background:#A3ABAE;
+
-
text-decoration:underline;
+
}
}
-
#navbar li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
 
-
text-decoration:none;
 
-
}
 
-
#navbar li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
+
.navbar  
-
background:#333;
+
{
 +
    padding:0 20px;
}
}
Line 155: Line 149:
<!--navigation menu-->
<!--navigation menu-->
-
<ul id="navbar">
+
<ul class="navbar">
<li><a href="https://2012hs.igem.org/Team:Sharon_MA_Aquila">HOME</a></li>
<li><a href="https://2012hs.igem.org/Team:Sharon_MA_Aquila">HOME</a></li>

Revision as of 04:49, 28 March 2012


Retrieved from "http://2012hs.igem.org/Template:Aquila"