Template:Caltech Menubar

From 2012.igem.org

(Difference between revisions)
Line 104: Line 104:
/************************************************************/
/************************************************************/
-
#nav, #nav ul {
+
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
-
    line-height: 1.5em;
+
/*------------------------------------*\
-
    list-style-position: outside;
+
NAV
-
    list-style-type: none;
+
\*------------------------------------*/
-
    margin: 0;
+
#nav{
-
    padding: 0;
+
list-style:none;
-
    position: relative;
+
margin-bottom:0px;
-
}
+
/* Clear floats */
 +
float:center;
-
#nav a:link, #nav a:active, #nav a:visited {
+
  font: arial, helvetica, sans-serif;
-
    background-color: #333333;
+
  height: auto;
-
    border: 1px solid #333333;
+
  width: auto;
-
    color: #FFFFFF;
+
  margin: 0;
-
    display: block;
+
  border-top: 0;
-
    padding: 0 5px;
+
  border-right: 0;
-
    text-decoration: none;
+
  border-left: 0;
 +
  padding: 0;
 +
  background: black;
 +
  position:center;
 +
*/
}
}
-
 
+
ul, li
-
#nav a:hover {
+
{
-
    background-color: #FFFFFF;
+
margin:0;
-
    color: #333333;
+
padding:0;
 +
padding-top:5px;
}
}
-
#nav li {
+
#nav li{
-
    position: relative;
+
float:left;
-
    width: 100px;
+
margin-right:0px;
 +
position:relative;
 +
  font: arial, helvetica, sans-serif;
 +
  text-align: left;
 +
  list-style-type: none;
 +
  border: 0;
 +
  padding: 10px;
 +
  background: black;
}
}
-
 
+
#nav a{
-
#nav ul {
+
        display:inline-block;
-
    display: none;
+
padding-below:12px;
-
    left: 100px;
+
background:#000000;
-
    position: absolute;
+
text-decoration:none;
-
    width: 192px;
+
-
    top:0;
+
}
}
-
 
+
#nav a:hover{
-
#nav li ul a {
+
background:#000000;
-
    float: left;
+
text-decoration:underline;
-
    width: 192px;
+
}
}
-
#nav ul ul {
+
/*--- DROPDOWN ---*/
-
    top:0;
+
#nav ul{
 +
background:#000000; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
 +
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
 +
list-style:none;
 +
position:absolute;
 +
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
}
-
 
+
#nav ul li{
-
#nav li ul ul {
+
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
-
    left: 192px;
+
float:none;
-
    top:0px;
+
-
    margin: 0 0 0 13px;
+
}
}
-
 
+
#nav ul a{
-
#nav li ul ul ul {
+
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
-
    left: 192px;
+
-
    top:0px;
+
-
    margin: 0 0 0 13px;
+
}
}
-
 
+
#nav li:hover ul{ /* Display the dropdown on hover */
-
 
+
left:0; /* Bring back on-screen when needed */
-
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
+
-
    display: none;
+
}
}
-
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
+
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
-
    display: block;
+
background:#000000;
 +
text-decoration:none;
 +
}
 +
#nav 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;
 +
}
 +
#nav li:hover ul li a:hover{ /* Here is the background for hovering over each individual link. */
 +
background:#000000;
}
}
-
 
</style>
</style>

Revision as of 18:45, 14 September 2012

Retrieved from "http://2012.igem.org/Template:Caltech_Menubar"