JSFiddle - React, Tailwind, and code Playground

by Oliver Zhang

HTML

<nav id="nav">
    <ul>
        <li><a href="#" class="current-active-menu-item" >首页</a><li>
        <li><a href="#">博文</a>
            <ul id="sub-menu">
                <li><a href="#">前端技术</a></li>
                <li><a href="#">交互设计</a></li>
                <li><a href="#">视觉设计</a></li>
                <li><a href="#">用户研究</a></li>
                <li><a href="#">团队生活</a></li>
            </ul>
        </li>
        <li><a href="#">关于我们</a></li>
     </ul>
</nav>

CSS

nav, ul,li{
    margin:0;
    padding:0;
}

body{
    background:#F8F8F8;
}


a{
    text-decoration:none;
    color:#333;
    display:block;
    text-indent:55px;
    padding:10px 0;
    position:relative;

}
#nav{
    width:250px;
    background:#fff;
    box-sizing:border-box;
    position:relative;
    margin-left:15px;
}
.current-active-menu-item{
   color:#FF5500;
   background:#f8f8f8;
}
li{
    list-style:none;
}
li+li a{
    border-top:1px solid #f8f8f8;
}
#sub-menu a{
    text-indent:80px;
}
a:hover{
    background:#f8f8f8;
    color:#FF5500;
}
a:hover::before{
    content:" ";
    display:block;
    width:5px;
    height:100%;
    position:absolute;
    left:-4px;
    bottom:1px;
    background:#FF5500;
    z-index:9999;
}