Question

我正在使用ul li li作为菜单列表。我能够在悬停和访问过的链接中更改菜单项的颜色，但是在活动状态颜色没有变化时，你能告诉我这个问题的解决方案是什么？ / p>

 <!DOCTYPE html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Chandan</title>
 <link rel="shortcut icon" href="../Resources/favicon.png" />
 <link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />

 </head>

 <body>
 <div class="container">

  <div class="header">
    <div class="menu_line">
    <img src="../Resources/Logo.png" alt="logo" id="logo">  

    <ul>
    <li value="home"><b><a href="portfolio_design.html" title="Home Page">Home</a></b></li>
    <li value="services"><b><a href="services.html" title="About services">Services</a></b></li>
    <li value="portfolio"><b><a href="portfolio.html" title="Porfile">Portfolio</a></b></li>
    <li value="blog"><b><a href="blog.html" title="Blog area">Blog</a></b></li>
    <li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>              

     </li>
    </ul>

    </div><!--menu line end here-->


</div><!--header end here-->
</div><!--container end here-->

</body>
</html>

#css FIle*

@charset "utf-8";
/* CSS Document */

  #logo
 {  
     margin:0 auto;
 float:left;
 height:55px;
 width:60px;
 margin-top:0px;
 margin-left:0px;
  }

  ul
  { 

 margin:17px auto;
 float:right;
  }

 li
  {
 list-style-type:none;
 display:inline;
 display: inline-block;
 padding-left: 25px;

 }

  .menu_line{
   margin:0 auto;
   margin-top:60px;
   margin-left:120px;
   height:55px;
   width:730px;
   float:left;
   border-style: solid;
  border-width: 2px;
   }
   .container {
  margin: 0px auto;
  width: 998px;
  background-position:center;
   }

  .header
   {    
   margin:0 auto;
  background-color:#f82424;
  margin-top:-8px;
  margin-left:-8px;
  height:660px;
  width:1007px;
  background-position:center;

   }
  li a
  {
  color:#fcb1b1;
  text-decoration:none;
  }

   li a:hover
   {
  color:#fff;
  text-decoration:underline;
  }

  li a:active
   {
   color:#fff;
   text-decoration:underline;
   }

Answer 1

这可能会有所帮助

    #menu_line .active a {
    background-color:#FFD700;
    }

Answer 2

这是我在css中的解决方案：我已经在样式和菜单项中编辑了代码

只需将class="active"设置为要显示为活动状态的每个li元素我已将class="active"添加到服务菜单项。

HTML

 <div class="container">

  <div class="header">
    <div class="menu_line">
    <img src="../Resources/Logo.png" alt="logo" id="logo">  

    <ul>
    <li value="home"><b><a href="portfolio_design.html" title="Home Page">Home</a></b></li>
    <li value="services" class="active" ><b><a href="services.html" title="About services">Services</a></b></li>
    <li value="portfolio"><b><a href="portfolio.html" title="Porfile">Portfolio</a></b></li>
    <li value="blog"><b><a href="blog.html" title="Blog area">Blog</a></b></li>
    <li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>              

     </li>
    </ul>

    </div><!--menu line end here-->


</div><!--header end here-->
</div><!--container end here-->

<强> CSS

  #logo
 {  
     margin:0 auto;
 float:left;
 height:55px;
 width:60px;
 margin-top:0px;
 margin-left:0px;
  }

  ul
  { 

 margin:17px auto;
 float:right;
  }

 li
  {
 list-style-type:none;
 display:inline;
 display: inline-block;
 padding-left: 25px;

 }

  .menu_line{
   margin:0 auto;
   margin-top:60px;
   margin-left:120px;
   height:55px;
   width:730px;
   float:left;
   border-style: solid;
  border-width: 2px;
   }
   .container {
  margin: 0px auto;
  width: 998px;
  background-position:center;
   }

  .header
   {    
   margin:0 auto;
  background-color:#f82424;
  margin-top:-8px;
  margin-left:-8px;
  height:660px;
  width:1007px;
  background-position:center;

   }



 li a,
 li a:hover,
 li a:active {
   color:#fff;
   text-decoration:underline;

}

 li.active a, 
 li.active a:hover, 
 li.active a:active {
  background: #323637;
}

如何使用ul和li标签制作导航栏？

2 个答案: