|
|
| Line 104: |
Line 104: |
| | /************************************************************/ | | /************************************************************/ |
| | | | |
| - | /* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
| + | #nav, #nav ul { |
| - | /*------------------------------------*\
| + | line-height: 1.5em; |
| - | NAV
| + | list-style-position: outside; |
| - | \*------------------------------------*/
| + | list-style-type: none; |
| - | #nav{
| + | margin: 0; |
| - | list-style:none;
| + | padding: 0; |
| - | margin-bottom:0px;
| + | position: relative; |
| - | /* Clear floats */
| + | } |
| - | float:center;
| + | |
| | | | |
| - | font: arial, helvetica, sans-serif;
| + | #nav a:link, #nav a:active, #nav a:visited { |
| - | height: auto;
| + | background-color: #333333; |
| - | width: auto;
| + | border: 1px solid #333333; |
| - | margin: 0;
| + | color: #FFFFFF; |
| - | border-top: 0;
| + | display: block; |
| - | border-right: 0;
| + | padding: 0 5px; |
| - | border-left: 0;
| + | text-decoration: none; |
| - | padding: 0;
| + | |
| - | background: black;
| + | |
| - | position:center;
| + | |
| - | */
| + | |
| | } | | } |
| - | ul, li
| + | |
| - | { | + | #nav a:hover { |
| - | margin:0;
| + | background-color: #FFFFFF; |
| - | padding:0;
| + | color: #333333; |
| - | padding-top:5px;
| + | |
| | } | | } |
| - | #nav li{ | + | #nav li { |
| - | float:left;
| + | position: relative; |
| - | margin-right:0px;
| + | width: 100px; |
| - | position:relative;
| + | |
| - | font: arial, helvetica, sans-serif;
| + | |
| - | text-align: left;
| + | |
| - | list-style-type: none;
| + | |
| - | border: 0;
| + | |
| - | padding: 10px;
| + | |
| - | background: black;
| + | |
| | } | | } |
| - | #nav a{ | + | |
| - | display:inline-block;
| + | #nav ul { |
| - | padding-below:12px;
| + | display: none; |
| - | background:#000000;
| + | left: 100px; |
| - | text-decoration:none;
| + | position: absolute; |
| | + | width: 192px; |
| | + | top:0; |
| | } | | } |
| - | #nav a:hover{ | + | |
| - | background:#000000;
| + | #nav li ul a { |
| - | text-decoration:underline;
| + | float: left; |
| | + | width: 192px; |
| | } | | } |
| | | | |
| - | /*--- DROPDOWN ---*/
| + | #nav ul ul { |
| - | #nav ul{ | + | top:0; |
| - | 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{ | + | |
| - | padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
| + | #nav li ul ul { |
| - | float:none;
| + | left: 192px; |
| | + | top:25px; |
| | + | margin: 0 0 0 13px; |
| | } | | } |
| - | #nav ul a{ | + | |
| - | white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
| + | #nav li ul ul ul { |
| | + | 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 a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ | + | #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { |
| - | background:#000000;
| + | display: block; |
| - | 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;
| + | |
| - | }
| + | |
| - | #nav ul, #nav:hover ul li ul, #nav:hover ul li:hover ul li ul{
| + | |
| - | display:none; | + | |
| - | list-style-type:none;
| + | |
| - | width: 180px;
| + | |
| | } | | } |
| | | | |
| - | #nav:hover ul li:hover ul, #nav:hover ul li:hover ul li:hover ul {
| |
| - | position:absolute;
| |
| - | display:block;
| |
| - | left: 182px; top: 32px;
| |
| - | }
| |
| | | | |
| - | #nav ul li ul, #nav ul li ul li ul {
| |
| - | clear: left;
| |
| - | margin-top: -30px;
| |
| - | }
| |
| | </style> | | </style> |
| | </head> | | </head> |
| | | | |
| | </html> | | </html> |
"
