Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="menu">
                <ul>
                <li><a href='index.html'>Home</a></li>
                <div class="menutab"></div>
                <li><a href='about_us.html'>About Us</a></li>
                <div class="menutab"></div>
                <li><a href='#'>Order Online</a></li>
                <div class="menutab"></div>
                <li><a href='gallery.html'>Gallery</a></li>
                <div class="menutab"></div>
                <li><a href='#'>Contact Us</a></li>
                <div class="menutab"></div>
                </ul>
            </div>
</body>
</html>
 
.menu {
    width: 100%;
    height: 220px;
    float: left;
    margin-left: -20px;
    position: relative;
    text-align: center;
}
.menu li{
    display: block;
    list-style: none;
    width: 100%;
    background: #EBE5D9;
    height: 50px;
    margin-left: -40px;
    margin-top: 5px;
    line-height: 50px;
}
.menu li:hover {
    background: #AEC32A;
}
.menu li:hover+.menutab {
    border-right-color: #AEC32A;
}
.menu li a{
    text-decoration: none;
    font-size: 20px;
    color: #000000;
    font-family: fantasy;
}
.menutab {
    width: 30px;
    position: relative;
    margin-top: -3px;
    margin-left: -71px;
    border-right: 21px solid #EBE5D9;
    border-bottom: 21px solid transparent;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers