Why don't my anchors appear depressed when clicked?

user_18365582 0
Viewed 23

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><a href="#">Men</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Kids</a></li>
    <li><a href="#">SALE</a></li>
  </ul>
</nav>

button hyperlink css html
1 Answers

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><a href="#">Men</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Kids</a></li>
    <li><a href="#">SALE</a></li>
  </ul>
</nav>

user_12648040
Related