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

这是最新的代码：

<强> HTML

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

}

这是实时example

功能区样式菜单？

1 个答案: