"
Template:Paris/NavBar
From 2008.igem.org
<style type="text/css">
- nav, #nav ul {
position: relative; margin: 0 auto; /* purpose: allow centering ul table */ padding: 0; display: table /* purpose: ul doesn't stretch width 100% */ }
- nav li {
display: table-cell; /* purpose: li behaves like table-cell */ position: relative; /* purpose: non-overlap li elements in ul */ list-style: none; /* purpose: remove default html list-style */ }
- nav li a {
display: block; /* purpose: non-overlap div on a */ margin: 0 1px 0 0; /* purpose: spacing main menu items */ padding: 4px 16px; background-color: #649cd7; color: #FFF; text-align: center; text-decoration: none; /* purpose: remove underline from a */ font: bold 13px arial; }
- nav li a:hover {
background-color: #d4e2ef; color: black; }
- nav div {
position: absolute; /* purpose: li of div doesn't spread out */ display: none; width: 10em; opacity: 0.8; filter: alpha(opacity=80); border: 1px solid #5970B2; background: #EAEBD8; }
- nav span a, #nav div a {
position: relative; display: block; /* purpose: a's in div have same width */ margin: 0; padding: 5px 10px; text-align: left; font: 11px arial; }
- nav span a:hover, #nav div a:hover {
background-color: #d4e2ef; color: #000; }
- nav span div {
position: relative; margin: 0; border: none; /* purpose: reset border to none */ border-top: 1px solid #5970B2; /* purpose: add a seperator */ border-bottom: 1px solid #5970B2; /* purpose: add a seperator */ opacity: 1.0; /* purpose: opacity already 0.8 by #nav div */ filter: alpha(opacity=100); /* purpose: opacity already 80 by #nav div */ }
#nav span div a { text-indent: 10px; }
#nav span div span div a { text-indent: 20px; }
- nav .expand {
background-image: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png'); background-repeat: no-repeat; background-position: 95% 50%; }
- nav .collapse {
background-image: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png'); background-repeat: no-repeat; background-position: 95% 50%; } </style>
