Difference between revisions of "Team:UNC-Chapel Hill/practicemenu"
| Line 4: | Line 4: | ||
</style> | </style> | ||
<head> | <head> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<style type="text/css"> | <style type="text/css"> | ||
/* Some stylesheet reset */ | /* Some stylesheet reset */ | ||
| − | .nav, .nav ul { | + | #menu .nav, .nav ul { |
margin: 0; | margin: 0; | ||
margin-bottom: 30px; | margin-bottom: 30px; | ||
| Line 22: | Line 18: | ||
/* The top navigation menu */ | /* The top navigation menu */ | ||
| − | .nav { | + | #menu .nav { |
/* Layout & positioning */ | /* Layout & positioning */ | ||
display: block; | display: block; | ||
| Line 38: | Line 34: | ||
/* The link containers */ | /* The link containers */ | ||
| − | .nav>li { | + | #menu .nav>li { |
display:inline-block; | display:inline-block; | ||
position: relative; | position: relative; | ||
| Line 47: | Line 43: | ||
/* The main navigation links */ | /* The main navigation links */ | ||
| − | .nav>li>a { | + | #menu .nav>li>a { |
/* Layout & positioning */ | /* Layout & positioning */ | ||
display: block; | display: block; | ||
| Line 74: | Line 70: | ||
/* Chaning the background on hover */ | /* Chaning the background on hover */ | ||
| − | .nav>li>a:hover, .nav>li:hover>a { | + | #menu .nav>li>a:hover, .nav>li:hover>a { |
background: rgba(255, 255, 255, .9); | background: rgba(255, 255, 255, .9); | ||
color: #000; | color: #000; | ||
} | } | ||
| − | .nav>li:first-child a { | + | #menu .nav>li:first-child a { |
border-top-left-radius: 3px; | border-top-left-radius: 3px; | ||
} | } | ||
| Line 85: | Line 81: | ||
| − | .arrow:hover { | + | #menu .arrow:hover { |
-moz-transition-duration: 3000s; | -moz-transition-duration: 3000s; | ||
-ms-transition-duration: 3000s; | -ms-transition-duration: 3000s; | ||
| Line 95: | Line 91: | ||
/* General styling for the submenus */ | /* General styling for the submenus */ | ||
| − | .nav ul { | + | #menu .nav ul { |
display: inline-block; | display: inline-block; | ||
position: absolute; | position: absolute; | ||
| Line 105: | Line 101: | ||
/* Level 1 submenus */ | /* Level 1 submenus */ | ||
| − | .nav>li>ul { | + | #menu .nav>li>ul { |
cursor: pointer; | cursor: pointer; | ||
padding-top: 0px; | padding-top: 0px; | ||
| Line 113: | Line 109: | ||
/* Making the level 1 submenu to appear on hover */ | /* Making the level 1 submenu to appear on hover */ | ||
| − | .nav>li:hover>ul { | + | #menu .nav>li:hover>ul { |
left: 0px; | left: 0px; | ||
} | } | ||
| Line 119: | Line 115: | ||
/* The submenu link containers */ | /* The submenu link containers */ | ||
| − | .nav ul li { | + | #menu .nav ul li { |
position: relative; | position: relative; | ||
display: block; | display: block; | ||
| Line 132: | Line 128: | ||
/* Expanding the list elements which contain the links */ | /* Expanding the list elements which contain the links */ | ||
| − | .nav li:hover>ul>li { | + | #menu .nav li:hover>ul>li { |
height: 24px; | height: 24px; | ||
} | } | ||
| − | .nav>li:hover>ul>li:first-child { | + | #menu .nav>li:hover>ul>li:first-child { |
height: 27px; | height: 27px; | ||
} | } | ||
| − | .nav>li>ul>li:first-child>a { | + | #menu .nav>li>ul>li:first-child>a { |
border-top: 3px solid #fff; | border-top: 3px solid #fff; | ||
} | } | ||
| − | .nav>li>ul>li.dropdown:first-child>ul { | + | #menu .nav>li>ul>li.dropdown:first-child>ul { |
top: 3px; | top: 3px; | ||
} | } | ||
/* The links of the submenus */ | /* The links of the submenus */ | ||
| − | .nav ul li a { | + | #menu .nav ul li a { |
/* Layout */ | /* Layout */ | ||
display: block; | display: block; | ||
| Line 170: | Line 166: | ||
} | } | ||
| − | .nav>li>ul>li:first-child>a::before { | + | #menu .nav>li>ul>li:first-child>a::before { |
content: ""; | content: ""; | ||
display: block; | display: block; | ||
| Line 184: | Line 180: | ||
/* The hover state of the links */ | /* The hover state of the links */ | ||
| − | + | #menu .nav ul li:hover>a, .nav ul li>a:hover { | |
background: #c8c8c8; /*e7e7e7 */ | background: #c8c8c8; /*e7e7e7 */ | ||
color: #000000; | color: #000000; | ||
| Line 190: | Line 186: | ||
/* Changing the color of the arrow on hover */ | /* Changing the color of the arrow on hover */ | ||
| − | + | #menu .nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after { | |
border-left-color: #fff; | border-left-color: #fff; | ||
} | } | ||
| − | .nav>li>ul>li | + | #menu .nav>li>ul>li |
{ | { | ||
margin-bottom: 0 | margin-bottom: 0 | ||
| Line 200: | Line 196: | ||
| − | + | #menu .nav>li:first-child:hover>ul | |
{ | { | ||
left:0px; | left:0px; | ||
} | } | ||
| − | + | #menu .nav>li:last-child:hover>ul | |
{ | { | ||
left: 0px; | left: 0px; | ||
} | } | ||
| − | .tableCSS | + | #menu .tableCSS |
{ | { | ||
background-color:#ffffff; | background-color:#ffffff; | ||
| Line 220: | Line 216: | ||
</head> | </head> | ||
| − | <body> | + | |
| + | |||
| + | <body id="menu"> | ||
<a id="top"> | <a id="top"> | ||
</a> | </a> | ||
Revision as of 21:27, 27 August 2015
