尝试在菜单项周围添加边框并使一个项目具有不同的颜色

Question

正在尝试将 "Submit Assignment" 按钮的背景设为绿色。我们的网站是 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>

Answer 1

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

Answer 2

这是我的解决方案。我对 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>

Answer 3

为了让 "Submit Assignment" 按钮变成绿色，我添加了一个 class:

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

在此示例中，我使用 "active" 作为 class 并添加以下内容 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;*/
    }

Answer 4

@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>

尝试在菜单项周围添加边框并使一个项目具有不同的颜色

Trying to add borders around menu items and make one item a different color

html

css

menu