ลิงค์หรือเมนู ด้วย CSS

#menulayer1 li {
    margin-bottom:4px;
    list-style-type:none; /* ไม่ให้แสดงเป็น list */
    width:100px; /* ความกว้าง */
    height:20px; /* ความสูง */
}
#menulayer1 li a {
    font-weight:bold;
    text-decoration:none;
    color:#505050; /* สีของตัวหนังสือ */
    display:block;
    padding:6px 3px;
    background:#f4f4f4; /* สีพื้น */
    border-left:4px solid #cccccc; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
}   
#menulayer1 li a:hover {
    background:#eaeaea;
    color:#286ea0; /* สีของตัวหนังสือ */
    border-left:4px solid #286ea0; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
}
<ul id="menulayer1">
<li><a href="https://www.goragod.com" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.saiyaithai.org" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.6te.net" title="goragod.com">goragod.com</a></li>
</ul>

#menulayer2 li {
    margin-bottom:4px;
    list-style-type:none; /* ไม่ให้แสดงเป็น list */
    text-align:center; /* ตำแหน่งข้อความ */
    width:100px; /* ความกว้าง */
    height:20px; /* ความสูง */
}
#menulayer2 li a {
    font-weight:bold;
    height:20px;
    text-decoration:none;
    color:#505050; /* สีของตัวหนังสือ */
    display:block;
    padding:3px;
    background:#f4f4f4; /* สีพื้น */
    border-top:4px solid #cccccc; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
}   
#menulayer2 li a:hover {
    background:#eaeaea; /* สีพื้น */
    color:#286ea0; /* สีของตัวหนังสือ */
    border-top:4px solid #286ea0; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
}
<ul id="menulayer2">
<li><a href="https://www.goragod.com" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.saiyaithai.org" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.6te.net" title="goragod.com">goragod.com</a></li>
</ul>

#menulayer3 {
    margin-top:10px;
}
#menulayer3 li {
    display:inline; /* เมนูแนวนอน */
    position:relative;
    list-style-type:none;
}
#menulayer3 li a {
    font-weight:bold;
    text-decoration:none;
    color:#cccccc; /* สีของตัวหนังสือ */
    background:#f0f0f0; /* สีพื้น */
    border-bottom:1px solid #cccccc; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
    padding:6px 20px 3px 20px;
}   
#menulayer3 li a:hover {
    color:#286ea0; /* สีของตัวหนังสือ */
    border-bottom:4px solid #286ea0; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
    background:#f4f4f4; /* สีพื้น */
}
<ul id="menulayer3">
<li><a href="https://www.goragod.com" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.saiyaithai.org" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.6te.net" title="goragod.com">goragod.com</a></li>
</ul>