133 lines
2.7 KiB
CSS
133 lines
2.7 KiB
CSS
|
.container{
|
||
|
|
max-width: 950px;
|
||
|
|
}
|
||
|
|
/**********************************************************************
|
||
|
|
* Navigation menu *
|
||
|
|
**********************************************************************/
|
||
|
|
/* main navigation */
|
||
|
|
.nav-logo{
|
||
|
|
float:left;
|
||
|
|
padding:5px;
|
||
|
|
}
|
||
|
|
nav {
|
||
|
|
width: 100%;
|
||
|
|
z-index: 10000;
|
||
|
|
background-color: #fff;
|
||
|
|
border-bottom: 1px solid #dcdcdc;
|
||
|
|
min-height: 50px;
|
||
|
|
margin-bottom:5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul {
|
||
|
|
margin: 0;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul li {
|
||
|
|
display: inline;
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul li a {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 14px 16px;
|
||
|
|
|
||
|
|
color: #757575;
|
||
|
|
font-size: 1.7rem;
|
||
|
|
text-decoration: none;
|
||
|
|
|
||
|
|
transition: 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* add caret for drop menu */
|
||
|
|
nav ul > li a:not(:only-child):after { content: '\00a0\00a0▼'; font-size: 0.8rem; vertical-align: middle; }
|
||
|
|
|
||
|
|
/* sub menu */
|
||
|
|
nav ul ul {
|
||
|
|
position: absolute;
|
||
|
|
min-width: 180px;
|
||
|
|
|
||
|
|
height: 0px;
|
||
|
|
overflow: hidden; /* hide sub menu */
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul li:hover ul {
|
||
|
|
height: auto;
|
||
|
|
overflow: visible; /* show sub menu */
|
||
|
|
|
||
|
|
border: 1px solid #dcdcdc;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul ul li {
|
||
|
|
display: list-item;
|
||
|
|
float: none;
|
||
|
|
z-index:100;
|
||
|
|
background:white;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul ul li a {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Change background color of links on hover */
|
||
|
|
nav ul li a:hover {
|
||
|
|
background-color: #eee;
|
||
|
|
color: #757575;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav:after {
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Float right the list item that should be right aligned */
|
||
|
|
nav ul li.right { float: right; }
|
||
|
|
|
||
|
|
/* Hide the list item that contains the link that should open and close the topnav on small screens */
|
||
|
|
nav ul li.icon { display: none; }
|
||
|
|
|
||
|
|
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
|
||
|
|
@media screen and (max-width:880px) {
|
||
|
|
nav ul li:not(:first-child) { display: none; }
|
||
|
|
nav ul li.icon {
|
||
|
|
float: right;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* The "mobile" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the nav look good on small screens */
|
||
|
|
@media screen and (max-width:880px) {
|
||
|
|
nav.mobile ul { /* position: relative; */ }
|
||
|
|
nav.mobile ul li.icon {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
nav.mobile ul li {
|
||
|
|
float: none;
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
nav.mobile ul li a {
|
||
|
|
display: block;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
nav.mobile ul li ul {
|
||
|
|
position: relative;
|
||
|
|
height: auto;
|
||
|
|
overflow: visible;
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
nav.mobile ul li:hover ul {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
nav.mobile ul li.right {
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|