我的按钮和链接的悬停不起作用

Question

我正在创建这个网站，我制作了这个导航栏。它在锚标签中有虚拟链接，我的按钮上有一个 hover 属性。所有这些都正常工作。我对代码做了一些更改，现在 none 它可以工作了。我不知道我哪里出错了。我正在编辑属性，但一切都停止了。

* {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Arial";
  color: white;
}

html,
body {
  margin: 0 auto;
  background-color: black;
  max-width: 940px;
  min-height: 100%;
}

.wrapper {
  margin: 0 auto;
  width: 92%;
  background-image: url("images/backgrounds/wood.jpg");
}

/*********************************************************************************************************************************************
    HEADER STYLING
    *********************************************************************************************************************************************/

.header {
  position: relative;
  height: 100px;
  background-color: #111111;
}

.header h1 {
  position: relative;
  margin: 0;
  height: 20px;
  text-align: center;
  font-size: 2.3em;
  top: 25%;
}

.header p {
  position: relative;
  top: 25%;
  width: 100%;
  font-size: 1em;
  text-align: center;
}

/*********************************************************************************************************************************************
    NAVIGATION BAR STYLING
    *********************************************************************************************************************************************/

nav {
  height: 40px;
}

nav ul {}

nav ul li {
  background-color: #111111;
  text-align: center;
  list-style-type: none;
  width: 25%;
  float: left;
  /*margin: 0 1%;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #000;*/
}

nav ul li a {
  text-decoration: none;
  line-height: 40px;
  display: block;
}

nav ul li a:hover {
  background-color: #222222;
}

/*********************************************************************************************************************************************
    JUMBOTRON STYLING
    *********************************************************************************************************************************************/

.jumbotron {
  position: relative;
  background-image: url(images/jumbotron/studiopic.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  max-height: 53%;
}

.jumbotext h1 {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  text-align: right;
}

/*********************************************************************************************************************************************
    FOOTER STYLING
    *********************************************************************************************************************************************/

.footer {
  height: 100px;
  width: 100%;
  background-color: #111111;
}

<!DOCTYPE html>
<html>

<head>
  <title>CM Sound | Home</title>
  <meta charset="UTF-8">
  <meta name="description" content="CM Sound's studio webpage">
  <meta name="author" content="Ryan Buck | May 2015">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="header">
      <h1>CM Sound</h1><br/>
      <p>Create with us</p>
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Audio</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="jumbotron">
      <div class="jumbotext">
      </div>
    </div>
    <div class="footer">

    </div>
  </div>
</body>


</html>

Answer 1

在nav ul li a中添加这个 :

position: relative;

* {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Arial";
    color: white;
}

html, body {
    margin: 0 auto;
    background-color: black;
    max-width: 940px;
    min-height: 100%;
}

.wrapper {
    margin: 0 auto;
    width: 92%;
    background-image: url("images/backgrounds/wood.jpg");
}




/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/



.header {
    position: relative;
    height: 100px;
    background-color: #111111;
}

.header h1 {
    position: relative;
    margin: 0;
    height: 20px;
    text-align: center;
    font-size: 2.3em;
    top: 25%;
}

.header p {
    position: relative;
    top: 25%;
    width: 100%;
    font-size: 1em;
    text-align: center;
}




/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/



nav {
    height: 40px;
}

nav ul {

}

nav ul li {
    background-color: #111111;
    text-align: center;
    list-style-type: none;
    width: 25%;
    float: left;
    /*margin: 0 1%;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #000;*/
}

nav ul li a {
    text-decoration: none;  
    line-height: 40px;
    display: block;
    position: relative;
}

nav ul li a:hover {
    background-color: #222222;
}



/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/



.jumbotron {
    position: relative;
    background-image: url(images/jumbotron/studiopic.jpg);  
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    max-height: 53%;
}

.jumbotext h1 {
    display: inline-block;
    position: absolute;
    bottom: 0px;
    text-align: right;
}



/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/



.footer {
    height: 100px;
    width: 100%;
    background-color: #111111;
}

 <div class="wrapper">
        <div class="header">
            <h1>CM Sound</h1><br/>
            <p>Create with us</p>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Audio</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>  
        <div class="jumbotron">
            <div class="jumbotext">
            </div>
        </div>
        <div class="footer">

        </div>
    </div>

Answer 2

nav {
height: 40px;
position: relative;
}

只需添加相对于导航的位置

我的按钮和链接的悬停不起作用

The hover for my buttons and links won’t work

html

css

hover