Template:Regional Europe 2013 Page CSS
From 2013.igem.org
(Difference between revisions)
Line 152: | Line 152: | ||
/*--Menu Bar CSS--*/ | /*--Menu Bar CSS--*/ | ||
- | #navbarcontainer { width: 100%; | + | #navbarcontainer { |
+ | width: 100%; | ||
height: 35px; | height: 35px; | ||
background: #0090D1; /*blue */ | background: #0090D1; /*blue */ | ||
margin-top:0px; | margin-top:0px; | ||
- | font-size: | + | font-size: 11px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | |||
#navbarsocial { float:right; | #navbarsocial { float:right; | ||
padding-top: 4px; | padding-top: 4px; | ||
Line 174: | Line 170: | ||
padding:0px; line-height: 100%; | padding:0px; line-height: 100%; | ||
text-align: center; | text-align: center; | ||
- | font-weight: | + | font-weight: bold; font-size: .8em; |
-webkit-border-radius: 3px; | -webkit-border-radius: 3px; | ||
-moz-border-radius: 3px; | -moz-border-radius: 3px; | ||
Line 185: | Line 181: | ||
/*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/ | /*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/ | ||
ul#topnav { | ul#topnav { | ||
- | margin: 0; padding: 0 0 0 37px; | + | margin: 0; |
- | + | padding: 0 0 0 37px; | |
- | + | ||
- | + | ||
- | + | ||
font-size: 1em; | font-size: 1em; | ||
- | + | position: relative; | |
- | + | ||
} | } | ||
ul#topnav li { | ul#topnav li { | ||
- | + | display: inline-block; | |
- | + | ||
height: 35px; | height: 35px; | ||
- | border-right: 1px solid #ccc; /*--Divider for each parent level links--*/ | + | margin-left: -4px; |
+ | /*border-right: 1px solid #ccc; /*--Divider for each parent level links--*/ | ||
+ | } | ||
+ | ul#topnav li.navHome { | ||
+ | background: black; | ||
+ | width: 175px; | ||
+ | margin-left: -38px; | ||
+ | text-align: right; | ||
} | } | ||
+ | |||
+ | ul#topnav li.navHome a { | ||
+ | border: none; | ||
+ | } | ||
+ | |||
ul#topnav li a { | ul#topnav li a { | ||
- | padding: | + | height: 16px; |
+ | padding: 0px 15px; | ||
display: block; | display: block; | ||
color: #fff; | color: #fff; | ||
- | |||
- | |||
- | |||
text-decoration: none; | text-decoration: none; | ||
+ | border-right: 1px solid #ccc; | ||
+ | margin: 10px 0 0px; | ||
} | } | ||
- | ul#topnav li a:hover{ | + | ul#topnav li:last-child a { |
+ | border: none | ||
+ | } | ||
+ | ul#topnav li:hover{ | ||
color: #fff; | color: #fff; | ||
text-decoration: none; | text-decoration: none; | ||
- | + | background: #535353; | |
} | } | ||
- | ul#topnav li:hover { | + | ul#topnav li:hover a { |
- | ul#topnav li | + | border: none; |
- | + | } | |
- | padding: | + | |
+ | ul#topnav li div { | ||
+ | height: 10px; | ||
+ | padding: 6px 0 14px; | ||
position: absolute; | position: absolute; | ||
z-index:10; | z-index:10; | ||
- | + | top:35px; | |
display: none; /*--Hide by default--*/ | display: none; /*--Hide by default--*/ | ||
- | |||
background: #535353 /*#F37321*/; | background: #535353 /*#F37321*/; | ||
color: #fff; | color: #fff; | ||
Line 235: | Line 243: | ||
-webkit-border-bottom-left-radius: 10px; | -webkit-border-bottom-left-radius: 10px; | ||
} | } | ||
- | ul#topnav li:hover | + | |
- | ul#topnav li | + | ul#topnav li div.subNavRight { |
- | ul#topnav li | + | left: 438px; |
+ | } | ||
+ | ul#topnav li div.subNavMiddle { | ||
+ | left: 320px; | ||
+ | } | ||
+ | |||
+ | ul#topnav li div.subNavLeft { | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | ul#topnav li:hover div { display: block; } /*--Show subnav on hover--*/ | ||
+ | ul#topnav li div a { display: inline; } | ||
+ | ul#topnav li div a:hover { | ||
+ | text-decoration: underline; | ||
+ | color: #fff; | ||
+ | } | ||
/*--Menu Ends Here--*/ | /*--Menu Ends Here--*/ | ||
Revision as of 21:35, 2 June 2013