Media Queries

Below is a short example of my use of CSS media queries for the Alcoves 12.0 responsive website.

Navigation HTML

Navigation CSS

nav {
    width: auto;
    height: auto;
    margin-top: -80px;
    margin-right: 40px;
    padding: 0;
    float: right;
    /* background */
    background: #404c5f;
}

nav ul {list-style: none;}

nav ul li {
	float: left;
	position: relative;
}

nav ul li a {
	font-weight: bold;
	color: #fff;
	display: block;
	padding: 10px 20px;
	text-decoration: none;
}

nav ul li a:hover {color: #7791ae;}
nav ul li:hover, active {background: none;}
nav  ul li ul { display:none;  background: #4c617a; }
nav  ul li:hover ul { display:block; position:absolute;}
nav  ul li ul li {color:#fff; width: 180px; display:inline-block; float: left;}
nav ul li:hover ul li {background: none;  }
nav ul li:hover ul a {padding: 5px 20px;}
nav ul li:hover ul a:hover {background: #647d99; }


@media screen and (max-width: 720px) {
  nav {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
        position: relative;
	/* box shadow */
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0px 1px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0px 1px rgba(0,0,0,.4);
        box-shadow: inset 0 1px  rgba(255,255,255,.1), 0 0px 1px rgba(0,0,0,.4);
    }

    nav ul li a {
	font-weight: bold;
	color: #fff;
	display: block;
	padding: 10px 40px;
	text-decoration: none;
    }
    
    nav ul li a:hover {color: #fff;}
    nav ul li:hover, active{background: #58595b;}
}