功能区样式菜单

Question

我有一个快速的问题，谁能帮我使我的菜单看起来像这个网站上的菜单：

https://forums.digitalpoint.com/threads/please-help-with-css-navigation-overhang.2102229/

我现在已经尝试了几件事，但似乎无法得到它......

我当前的代码是：

.HTML：

<div class="navbar">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="#">TREATMENTS</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">OTHER</a></li>
    </ul>
</div>

.CSS：

/*Content for Navigation Bar*/
.navbar {
    width: 760px;
    padding-left: 200px;
    height: 50px;
    background-color: #534b49;
    text-align: center;
    float: left;
    font-size: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
    list-style: none;
    text-align: left;
}
.navbar li {
    float: left;
    padding-right: 15px;
}
.navbar li a {
    color: #fff;
    text-decoration: none;
}
.navbar li a:hover {
    color: #00a6bd;
    text-decoration: none;
}
.navbar li a#active {
    color: #00a6bd;
    text-decoration:none;
}

提前感谢！

运动员

Answer 1

这是最新的代码：

目录

<div>
<div class="navbar">
      <div class="cornerl"></div>
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="#">TREATMENTS</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">OTHER</a></li>
    </ul>
          <div class="cornerr"></div>
</div>
    <div class="strip" style="clear:both">    </div>
</div>

.css

               .navbar {
    position: relative;
    width: 760px;
    padding-left: 200px;
    height: 50px;
    background-color: #004080;
    text-align: center;
    float: left;
    font-size: 16px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar ul {
}

.navbar ul li {
    list-style: none;
    text-align: left;
}
.navbar li {
    float: left;
}
.navbar li a {
    padding:12px;
     padding-bottom:15px;
    color: #fff;
    text-decoration: none;
}
.navbar li a:hover {
    color: #00a6bd;
    border-radius:3px;
    text-decoration: none;
      background:#ff7000;
    color:#534b49;
}
.navbar li a#active {
    color: #00a6bd;
    text-decoration:none;
}
.strip{
background-color: #ff7000;
height: 3px;
width: 948px;
margin-left: 7px;
}
.cornerl{
border-color: transparent #FF7000 transparent transparent;
left: -10px;
}
.cornerl,.cornerr{
position: absolute;
bottom: -10px;
z-index: -1;
border-style: solid;
border-width: 10px;
}
.cornerr{
    float:right;
    right:-10px;
    border-color: transparent transparent transparent #FF7000;
}

这是现场示例