CSS凹型导航按钮效果的实现代码

            <div class="right"></div>    
        </li>    
        <li>    
            <div class="left"></div>    
            <div class="con">导航4</div>    
            <div class="right"></div>    
        </li>    
    </ul>    
</nav>    
</body>    
</html>  

再看CSS

CSS Code复制内容到剪贴板

#nav {    
            background: #fff;    
            border-bottom: 1px solid #7bd1ff;    
            width: 960px;    
            margin: 100px auto;    
            height: 60px;;    
        }    
     
        #nav ul li {    
            float: left;    
            list-style: none;    
            height: 60px;    
            margin: 0 10px;    
        }    
     
        li * {    
            float: left;    
            transition: all .2s;    
        }    
     
        .con {    
            width: 60px;