Why don't my anchors appear depressed when clicked? - html

Question

I'm taking a coding class and we were making a navigation bar with clickable links. The problem is mine wouldn't work at all. I added position: relative; and top: 0; so that way the buttons would move down after clicking and also removed the box-shadow after clicking on the link. It doesn't seem to do anything. Does anyone know what the problem might be? Sorry if my question doesn't make any sense.
body {
margin: 10%;
font-family: Tahoma, Verdana, Geneva, sans-serif;
}
nav {
overflow: hidden;
width: 43%;
margin: 0 auto;
padding-bottom: 1em;
}
nav ul {
list-style-type: none;
/* Step 2: Remove bullets */
}
nav ul li {
float: left;
/* Step 3: Float li's left to line up horizontally */
}
/* Psuedoclass Class Selectors - State of links LVHA */
nav a:link {
/* Default state of link */
display: block;
/* Step 4: Gives anchor tag structure */
width: 6em;
/* Increases width of links and makes all buttons a standard width */
border: 2px solid rgb(175, 175, 175);
text-align: center;
text-decoration: none;
padding: .5em 1em;
/* Gives breathing room between content and inside of border */
margin: 0 5px;
border-radius: 6px;
background-color: rgb(190, 190, 190);
color: white;
text-shadow: #666 .1em .1em .1em;
/* Color, right, bottom, blur */
box-shadow: rgba(0, 0, 0, .5) 0 5px 3px;
/* Color, right, bototm, blur */
/* Sets position of each button to relative and sets positions to zero */
position: relative;
top: 0;
}
nav a:visited {
border: 2px solid rgb(175, 175, 175);
color: white;
}
nav a:hover {
background-color: #fdca00;
border-color: #fda700;
}
nav a:active a:focus {
/* Moves button 3px down and removes shadow on click */
top: 3px;
box-shadow: rgba(0, 0, 0, .5) 0 0 0;
}
<nav>
<ul>
<li>Men</li>
<li>Women</li>
<li>Kids</li>
<li>SALE</li>
</ul>
</nav>

Answer 1

The problem lies with this selector: nav a:active a:focus
It translates to an anchor element with focus inside an anchor element that's active inside a nav element. You don't want that. You want a list with two separate selectors, both originating from the nav element:
nav a:active, nav a:focus {}
This addresses both the active (currently being clicked) and focused (no other element has been selected yet) states of the element.
body {
margin: 10%;
font-family: Tahoma, Verdana, Geneva, sans-serif;
}
nav {
overflow: hidden;
width: 43%;
margin: 0 auto;
padding-bottom: 1em;
}
nav ul {
list-style-type: none;
/* Step 2: Remove bullets */
}
nav ul li {
float: left;
/* Step 3: Float li's left to line up horizontally */
}
/* Psuedoclass Class Selectors - State of links LVHA */
nav a:link {
/* Default state of link */
display: block;
/* Step 4: Gives anchor tag structure */
width: 6em;
/* Increases width of links and makes all buttons a standard width */
border: 2px solid rgb(175, 175, 175);
text-align: center;
text-decoration: none;
padding: .5em 1em;
/* Gives breathing room between content and inside of border */
margin: 0 5px;
border-radius: 6px;
background-color: rgb(190, 190, 190);
color: white;
text-shadow: #666 .1em .1em .1em;
/* Color, right, bottom, blur */
box-shadow: rgba(0, 0, 0, .5) 0 5px 3px;
/* Color, right, bototm, blur */
/* Sets position of each button to relative and sets positions to zero */
position: relative;
top: 0;
}
nav a:visited {
border: 2px solid rgb(175, 175, 175);
color: white;
}
nav a:hover {
background-color: #fdca00;
border-color: #fda700;
}
nav a:active, nav a:focus {
/* Moves button 3px down and removes shadow on click */
top: 3px;
box-shadow: rgba(0, 0, 0, .5) 0 0 0;
}
<nav>
<ul>
<li>Men</li>
<li>Women</li>
<li>Kids</li>
<li>SALE</li>
</ul>
</nav>