菜单栏中的活动 link 不起作用

Question

我无法在菜单栏的主页按钮上放置“a:hover”。甚至无法删除文字装饰。当我尝试处理媒体查询时，我感到很困惑。

***** 堆栈溢出设置不允许我 post 提问，除非我添加更多详细信息*****

body {
 background-image: url("blue-bokeh.jpeg");
 width: 100%;
 height: 100%;
}

.wrap {
 height: auto;
 width: 90%;
 margin: auto;
}

header {
 background: #333;
 color: white;
 height: auto;
 width:100%;
 float: left;
}

header nav {
 width: 100%;
 height: auto;
}

header nav ul {
 list-style: none;
 height: auto;
 width: auto; /* what happens if i change the value to 100% */
 float: right;
 margin-right:30px;
}

header nav ul li {
 display: inline;
 padding: 15px 30px;
 float: left;
 border-radius: 5px;
}

header nav ul li a.active {
    text-decoration: none;
}

header nav ul li:hover {
 background-color: #111;
}

header nav ul li a.active:active {
    background-color: #4caf50;
}

.mainbody {
 /*background: tomato;*/  /* get the code checked , if its repeated in .top class */
 float: left;
 margin-top: 20px;
 border-radius: 10px;
 /*padding: 20px 20px;*/
 height: auto;
 width: 60%;
 margin-right: 2%;
}

.top {
 background: tomato;
 margin-bottom: 10px;
 float: left;
 border-radius: 10px;
 padding: 20px 20px;
}

.top h3 {
 color: darkslategray

}

.bottom {
 background: tomato;
 margin-bottom: 50px;
 float: left;
 border-radius: 10px;
 padding: 20px 20px;
}

.bottom h3 {
 color: darkslategray

}

.sidebar {
 float: left;
 height: auto;
 width: 38%;
 margin-top: 20px;

}

.topside {
 background: orangered;
 margin-bottom: 10px;
 border-radius: 10px;
 padding: 20px 20px;
}

.middleside {
 background: orangered;
 margin-bottom: 10px;
 border-radius: 10px;
 padding: 20px 20px;
}

.bottomside {
 background: orangered;
 margin-bottom: 10px;
 border-radius: 10px;
 padding: 20px 20px;
}

footer {
 background: darkslategray;
 float: left;
 width: 100%;
 height: auto;
 border-radius: 10px;
}

footer p {
 padding-left: 50px;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------
 ---------------------------------------------------------------------------------------------------------------------------------------------
 ------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/

@media screen and (max-width: 700px) {
    body {
     background-image: url("blue-bokeh.jpeg");
     width: 100%;
     height: 100%;
    }
    
    .wrap {
     height: auto;
     width: 90%;
     margin: auto;
    }
    
    header {
     background: #444;
     color: white;
     height: auto;
     width:100%;
    }
    
    header nav {
     width: 100%;
     height: auto;
    }
    
    header nav ul {
     list-style: none;
     height: auto;
     width: 100%; /* what happens if i change the value to 100% */
     margin: 0;
        padding: 0;
        text-align: center;
       
    }
    
    header nav ul li {
     display: block;
     padding: 15px 30px;
        float: none;
    }
    
    header nav ul li:hover {
     background-color: #111;
    }
    
    header nav ul li a.active:active {
        background-color: #4caf50; 
    }
    
    .mainbody {
     /*background: tomato;*/  /* get the code checked , if its repeated in .top class */
     margin-top: 20px;
     border-radius: 10px;
     /*padding: 20px 20px;*/
     height: auto;
     width: 100%;
    }
    
    .top {
     background: tomato;
     margin-bottom: 10px;
     border-radius: 10px;
     padding: 20px 20px;
    }
    
    .top h3 {
     color: darkslategray
    
    }
    
    .bottom {
     background: tomato;
     border-radius: 10px;
     padding: 20px 20px;
    }
    
    .bottom h3 {
     color: darkslategray
    
    }
    
    .sidebar {
     height: auto;
     width: 100%;
    
    }
    
    .topside {
     background: orangered;
     margin-bottom: 10px;
     border-radius: 10px;
     padding: 20px 20px;
    }
    
    .middleside {
     background: orangered;
     margin-bottom: 10px;
     border-radius: 10px;
     padding: 20px 20px;
    }
    
    .bottomside {
     background: orangered;
     margin-bottom: 10px;
     border-radius: 10px;
     padding: 20px 20px;
    }
    
    footer {
     background: darkslategray;
     float: left;
     width: 100%;
     height: auto;
     border-radius: 10px;
    }
    
    footer p {
     padding-left: 50px;
    }
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
 <div class="wrap">
  <header>
   <nav>
    <ul>
     <li><a class="active" href="#home">Home</a></li>
     <li>Portfolio</li>
     <li>Blog</li>
     <li>Contact Us</li>
    </ul>
   </nav>
  </header>
  <div class="mainbody">
   <article class="top">
    <h3>First Post</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
   </article>

   <article class="bottom">
    <h3>Second Post</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
   </article>
  </div> 
  <div class="sidebar">
   <aside class="topside">
    <h3>Top Sidebar</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </aside>

   <aside class="middleside">
    <h3>Middle Sidebar</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </aside>

   <aside class="bottomside">
    <h3>Bottom Sidebar</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </aside>
  </div>

  <footer>
   <p>Copyright &copy; 2016 Faltoo Webdesigns</p> 
  </footer>

 </div>
</body> 
 

</html>

Answer 1

如果我没理解错的话，你想实现这样的目标吗？

https://jsfiddle.net/j7j54Lta/1/

我做了一些改进并更改了结构。 li 获得 .active-class 而不是锚点。如果活动 li 中的锚点悬停，它会改变颜色（或任何你想要实现的颜色）：

header nav ul li.active a:hover{
  color: red;
  /* or whatever*/
}

而且没有文字修饰：

header nav ul li.active a {
    text-decoration: none;
    cursor: default;
}

菜单栏中的活动 link 不起作用

active link in menu bar not working

html

css

media-queries