|
|
| Line 48: |
Line 48: |
| | background: url(https://static.igem.org/mediawiki/2013/b/b2/Marialab.jpg) no-repeat; | | background: url(https://static.igem.org/mediawiki/2013/b/b2/Marialab.jpg) no-repeat; |
| | } | | } |
| - | | + | #navbar ul { |
| - | <code><span class="code-comment">/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */</span>
| + | margin: 0; |
| - | <span class="code-comment">/*------------------------------------*\
| + | padding: 5px; |
| - | NAV
| + | list-style-type: none; |
| - | \*------------------------------------*/</span>
| + | text-align: center; |
| - | #nav{ | + | background-color: #000; |
| - | list-style:none;
| + | } |
| - | font-weight:bold;
| + | |
| - | margin-bottom:10px;
| + | #navbar ul li { |
| - | <span class="code-comment">/* Clear floats */</span>
| + | display: inline; |
| - | float:left;
| + | } |
| - | width:100%;
| + | |
| - | <span class="code-comment">/* Bring the nav above everything else--uncomment if needed.
| + | #navbar ul li a { |
| - | position:relative;
| + | text-decoration: none; |
| - | z-index:5;
| + | padding: .2em 1em; |
| - | */</span>
| + | color: #fff; |
| - | } | + | background-color: #000; |
| - | #nav li{ | + | } |
| - | float:left;
| + | |
| - | margin-right:10px;
| + | #navbar ul li a:hover { |
| - | position:relative;
| + | color: #000; |
| - | }
| + | background-color: #fff; |
| - | #nav a{ | + | } |
| - | display:block;
| + | |
| - | padding:5px;
| + | |
| - | color:#fff;
| + | |
| - | background:#333;
| + | |
| - | text-decoration:none;
| + | |
| - | }
| + | |
| - | #nav a:hover{
| + | |
| - | color:#fff;
| + | |
| - | background:#6b0c36;
| + | |
| - | text-decoration:underline;
| + | |
| - | } | + | |
| - | | + | |
| - | <span class="code-comment">/*--- DROPDOWN ---*/</span>
| + | |
| - | #nav ul{ | + | |
| - | background:#fff; <span class="code-comment">/* 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). */</span>
| + | |
| - | background:rgba(255,255,255,0); <span class="code-comment">/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */</span>
| + | |
| - | list-style:none;
| + | |
| - | position:absolute;
| + | |
| - | left:-9999px; <span class="code-comment">/* Hide off-screen when not needed (this is more accessible than display:none;) */</span>
| + | |
| - | }
| + | |
| - | #nav ul li{
| + | |
| - | padding-top:1px; <span class="code-comment">/* Introducing a padding between the li and the a give the illusion spaced items */</span>
| + | |
| - | float:none;
| + | |
| - | }
| + | |
| - | #nav ul a{
| + | |
| - | white-space:nowrap; <span class="code-comment">/* Stop text wrapping and creating multi-line dropdown items */</span>
| + | |
| - | }
| + | |
| - | #nav li:hover ul{ <span class="code-comment">/* Display the dropdown on hover */</span> | + | |
| - | left:0; <span class="code-comment">/* Bring back on-screen when needed */</span>
| + | |
| - | }
| + | |
| - | #nav li:hover a{ <span class="code-comment">/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */</span>
| + | |
| - | background:#6b0c36;
| + | |
| - | text-decoration:underline;
| + | |
| - | }
| + | |
| - | #nav li:hover ul a{ <span class="code-comment">/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */</span> | + | |
| - | text-decoration:none;
| + | |
| - | }
| + | |
| - | #nav li:hover ul li a:hover{ <span class="code-comment">/* Here we define the most explicit hover states--what happens when you hover each individual link. */</span>
| + | |
| - | background:#333;
| + | |
| - | }</code> | + | |
| | | | |
| | | | |
| | </style> | | </style> |
| | </html> | | </html> |
"
