អេសស៊ី

កូដ​HTML5, CSS3 មីនុយ (ពណ៌​ខៀវ) ដែល​ត្រូវ​ដាក់​ក្នុង HTML/JavaScript

<style>
#org_menu {
    position: relative;
    margin: 0 auto;
    clear: both;
    width: 960px;
    }
#org_menu:before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -9px;
    z-index: 1;
    border: 10px solid transparent;
    border-right-color: #4285F4;
}
#org_menu ul {
    display: block;
    position: relative;
    z-index: 2;
    padding: .2em 30px;
    margin-right: -2em;
    list-style: none;
    background: #446CB3;
    font-family: 'Khmer OS Bokor', serif;
    font-weight:bold;
    font-size: 16px;
    line-height: 1;
    color: white;
    text-transform: capitalize;
    border-radius: 0 9999px 9999px 0;
    box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),
                0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;
}
#org_menu ul:after {
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
}
    #org_menu li {
        float: left;
        position: relative;
    }
  
        #org_menu a {
            display: block;
            padding: .8em 1.4em;
            text-decoration: none;
            text-shadow: 1px 1px 1px rgba(0,0,0,.3);
            color: white;
            transition:.3s box-shadow, .3s padding;
            border-radius: 9999px;
        }
      
        #org_menu a:hover,
        #org_menu a:active {
            background: rgba(0,0,0,.1);
            color: #4285F4;
            box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset;
        }
      
        #org_menu a:active {
            background:white;
            color: #eee;
            padding: .5em .6em .3em 1em;
            text-shadow: 1px 1px 0 rgba(0,0,0,.4);
            box-shadow: 10px 6px 1px #c50 inset;
        }
    #org_menu:hover {
        transform: rotate(720deg);
    }
</style>

<nav id="org_menu">
<ul>
<li ><a href="#" title="Home">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About me</a></li>
</ul>
</nav>