1. <ul class="nav">
    2. <li class="nav-down">
    3. <a href="#">收藏夹</a>
    4. <div class="down-menu">
    5. <a href="#">收藏宝贝</a>
    6. <a href="#">收藏店铺</a>
    7. </div>
    8. </li>
    9. <li>
    10. <a href="#">卖家中心</a>
    11. </li>
    12. <li>
    13. <a href="#">联系客服</a>
    14. </li>
    15. </ul>

    1.gif
    css样式

    1. <style>
    2. *{margin: 0;padding:0}
    3. ul{
    4. list-style: none;
    5. }
    6. li{
    7. float: left;
    8. width: 200px;
    9. height: 50px;
    10. background: rgb(252, 111, 111);
    11. text-align: center;
    12. line-height: 50px;
    13. }
    14. li:hover{
    15. background: pink;
    16. }
    17. a{
    18. text-decoration: none;
    19. color: #fff;
    20. }
    21. .down-menu a{
    22. display: block;
    23. }
    24. .nav{
    25. width: 650px;
    26. margin-left: auto;
    27. margin-right: auto;
    28. }
    29. .down-menu{
    30. display: none;
    31. background: rgb(247, 173, 173);
    32. }
    33. li:hover .down-menu{
    34. display: block;
    35. }
    36. </style>