Меню стиля ленты?

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