尝试在菜单项周围添加边框并使一项变为其他颜色

时间：2019-07-10 17:07:38

标签： html css menu

尝试使“提交分配”按钮的背景变为绿色。我们的网站是http://www.stephensengineering.com/stephens33/。解决了边框问题，现在我需要将一个菜单项的背景设为绿色。我尝试添加CSS，但还是没有运气。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Horizontal Navigation Bar w/Rollover Effect</title> 
<style type="text/css"> 
<!-- 

 #navbar ul { 
    margin: 0; 
    padding: 10px; 
    list-style-type: none;
    text-align: right; 
    background-color: #000; 
    } 

#navbar ul li {  
    display: inline; 
    } 

#navbar ul li a { 
    font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
    background-color: #000; 
    } 

#navbar ul li a:hover { 
    color: #000; 
    background-color: #fff; 
    } 

    #navbar{
    position: fixed;
    z-index: 100000; /*To bring the navbar to the top of the stacking context*/
    width: 100%;
    }
    nav.stricky-fixed.fadeInDown.animated{

   top:40px; /*Since this element is already set as relative in the original code,
              the top property places the slideIn menu 40px (height of black nav menu)
              from the top of the page.*/

  }
    .social-icon-wrapper:hover {
  background-color: transparent !important;
}
.social-icon {
  width: 20px;
  vertical-align: top;
}
--> 
</style> 
</head> 
<body> 
<div id="navbar"> 
      <ul>
        <li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li>
        <li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li>
        <li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li>
        <li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li> 
        <li><a href="+18883000642">888-300-0642</a></li> 
        <li><a href="http://github.com">Stephens University</a></li> 
        <li><a href="http://github.com">Submit Assignment</a></li> 
      </ul> 
    </div>
</body> 
</html>

4 个答案:

答案 0 :(得分：0)

只需将CSS outline属性（例如outline: 3px solid red;）添加到#navbar ul li选择器中即可。边框将在每个导航链接周围形成重叠的边框。要使您的Submit Assignment按钮变为绿色，请将style="background-color: green"添加到相应的li元素中。

答案 1 :(得分：0)

这是我的解决方案。我在html和css文件中做了几处更改。希望它对您有用。

#navbar ul { 
    height: inherit;
    margin: 0;  
    list-style-type: none;
    text-align: right; 
    background-color: #000; 
    } 

#navbar ul li {  
    display: inline-block; 
    padding: 10px 5px;
  height: inherit;
  border-left: 1px solid #fff;
    } 

#navbar ul li a { 
    font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
/*     background-color: #000;  */
    } 

#navbar ul li:hover { 
    background-color: #fff; 
    } 
#navbar ul li:hover a { 
    color: #000 !important; 
    } 

    #navbar{
    position: fixed;
    z-index: 100000; /*To bring the navbar to the top of the stacking context*/
    width: 100%;
    }
    nav.stricky-fixed.fadeInDown.animated{

   top:40px; /*Since this element is already set as relative in the original code,
              the top property places the slideIn menu 40px (height of black nav menu)
              from the top of the page.*/

  }

.social-icon-wrapper:nth-child(3) {
  border-right: 1px solid #fff;
}
    .social-icon-wrapper:hover {
  background-color: transparent !important;
}
.social-icon {
  width: 20px;
  vertical-align: top;
}
<!--  -->
<div id="navbar"> 
      <ul>
        <li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!--  --><li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li><!--  --><li><a href="+18883000642">888-300-0642</a></li><!--  --><li><a href="http://github.com">Stephens University</a></li><!--  --><li><a href="http://github.com">Submit Assignment</a></li> 
      </ul> 
    </div>

答案 2 :(得分：0)

为使“提交分配”按钮变为绿色，我添加了一个类：

<li><a class="active" href="http://github.com">Submit Assignment</a></li>

在此示例中，我使用“ active”作为类，并添加以下CSS 

.active {
        padding: 10px;
        background-color: green;
        color: beige;
        text-decoration: none;
    }


对于边框，我添加了“ border-left”以存档所需的内容

#navbar ul li {
        display: inline;
        border-left: #fff 1px solid;
    }
#navbar ul li a {
        font-family: 'Montserrat';
        text-decoration: bold;
        padding: .2em 1em;
        color: #fff;
        padding: 10px;
        /*background-color: #000;*/
    }

答案 3 :(得分：0)

@MercedesPennell，这是修订后的解决方案。希望它能满足您的要求。

#navbar ul { 
    height: inherit;
    margin: 0;  
    list-style-type: none;
    text-align: right; 
    background-color: #000; 
    } 

#navbar ul li {  
    display: inline-block; 
    padding: 10px 5px;
  height: inherit;
  border-left: 1px solid #fff;
    } 

#navbar ul li a { 
    font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
/*     background-color: #000;  */
    } 

#navbar ul li:hover { 
    background-color: #fff; 
    } 
#navbar ul li:hover a { 
    color: #000 !important; 
    } 

    #navbar{
    position: fixed;
    z-index: 100000; /*To bring the navbar to the top of the stacking context*/
    width: 100%;
    }
    nav.stricky-fixed.fadeInDown.animated{

   top:40px; /*Since this element is already set as relative in the original code,
              the top property places the slideIn menu 40px (height of black nav menu)
              from the top of the page.*/

  }

.social-icon-wrapper:nth-child(3) {
  border-right: 1px solid #fff;
}
    .social-icon-wrapper:hover {
  background-color: transparent !important;
}
.social-icon {
  width: 20px;
  vertical-align: top;
}

 .submit-btn {
  background-color: green !important;
  border-left: none !important;
  }
  
<!--  -->
<div id="navbar"> 
      <ul>
        <li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!--  --><li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li><!--  --><li><a href="+18883000642">888-300-0642</a></li><!--  --><li><a href="http://github.com">Stephens University</a></li><!--  --><li class="submit-btn" ><a href="http://github.com">Submit Assignment</a></li> 
      </ul> 
    </div>

相关问题
最新问题