"
Team:IIT Madras
From 2012.igem.org
(Difference between revisions)
| Line 88: | Line 88: | ||
#iitm_menu li:hover .drop { | #iitm_menu li:hover .drop { | ||
background:url("https://static.igem.org/mediawiki/2012/5/51/Iitm_drop.gif") no-repeat right 7px; | background:url("https://static.igem.org/mediawiki/2012/5/51/Iitm_drop.gif") no-repeat right 7px; | ||
| + | } | ||
| + | |||
| + | |||
| + | .dropdown_1column, | ||
| + | .dropdown_2columns, | ||
| + | .dropdown_3columns, | ||
| + | .dropdown_4columns, | ||
| + | .dropdown_5columns { | ||
| + | margin:4px auto; | ||
| + | position:absolute; | ||
| + | left:-999em; /* Hides the drop down */ | ||
| + | text-align:left; | ||
| + | padding:10px 5px 10px 5px; | ||
| + | border:1px solid #777777; | ||
| + | border-top:none; | ||
| + | |||
| + | /* Gradient background */ | ||
| + | background:#F4F4F4; | ||
| + | background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); | ||
| + | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); | ||
| + | |||
| + | /* Rounded Corners */ | ||
| + | -moz-border-radius: 0px 5px 5px 5px; | ||
| + | -webkit-border-radius: 0px 5px 5px 5px; | ||
| + | border-radius: 0px 5px 5px 5px; | ||
| + | } | ||
| + | |||
| + | |||
| + | .dropdown_1column {width: 140px;} | ||
| + | .dropdown_2columns {width: 280px;} | ||
| + | .dropdown_3columns {width: 420px;} | ||
| + | .dropdown_4columns {width: 560px;} | ||
| + | .dropdown_5columns {width: 700px;} | ||
| + | |||
| + | #iitm_menu li:hover .dropdown_1column, | ||
| + | #iitm_menu li:hover .dropdown_2columns, | ||
| + | #iitm_menu li:hover .dropdown_3columns, | ||
| + | #iitm_menu li:hover .dropdown_4columns, | ||
| + | #iitm_menu li:hover .dropdown_5columns { | ||
| + | left:-1px;top:auto; | ||
} | } | ||
| Line 98: | Line 138: | ||
<div id="iitm_content" style = "position:relative; top : -90px;"> | <div id="iitm_content" style = "position:relative; top : -90px;"> | ||
<div id = "iitm_nav"> | <div id = "iitm_nav"> | ||
| - | <ul | + | <ul id="iitm_menu"> |
| - | <li ><a href="#" class = "drop"> | + | <li><a href="#">Home</a></li> |
| - | <li class = " | + | <li><a href="#" class="drop">5 Columns</a> |
| - | <li class = " | + | <div class="dropdown_5columns"> |
| - | <li class = " | + | <p>5 Columns content</p> |
| - | <li class = " | + | </div> |
| + | </li> | ||
| + | <li><a href="#" class="drop">4 Columns</a> | ||
| + | <div class="dropdown_4columns"> | ||
| + | <p>4 Columns content</p> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li><a href="#" class="drop">3 Columns</a> | ||
| + | <div class="dropdown_3columns"> | ||
| + | <p>3 Columns content</p> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li><a href="#" class="drop">2 Columns</a> | ||
| + | <div class="dropdown_2columns"> | ||
| + | <p>2 Columns content</p> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li><a href="#" class="drop">1 Column</a> | ||
| + | <div class="dropdown_1column"> | ||
| + | <p>1 Column content</p> | ||
| + | </div> | ||
| + | </li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
Revision as of 02:13, 29 August 2012
