[CSS3 Practice] Learn Apple Navigator Bar

Reference:

Apple Website- Navigation Bar

---

Codes:

<nav>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</nav>

body,html,nav,ul,li,div,a{margin:0; padding:0;}
/*取消li前面的dot*/
li,a{list-style-type: none}
/*取消標籤a的自定義模式*/
a{color:rgb(255, 255, 255); text-decoration: none;}
a:hover{
    color:rgba(244, 244, 255, 0.8);
}
nav{ 
    position: relative;
    /*width*/
    min-width:1024px;
    height:44px;  
    background:rgba(0, 0, 0, 0.8);
    color: rgb(255, 255, 255);  
    font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
    font-size: 16px;
    font-weight: 400;
}
ul{
    position: relative;
    max-width:1000px;
    /*區域居中*/
    margin:0 auto;
}
li{
    /*讓塊元素靠左邊
      在這裏沒有清除浮動*/
    float: left;
    margin-right:70px;
    /*讓字垂直居中*/
    line-height:44px;
}
li:nth-child(1){
    width:45px;
    height:44px;
    background-image:url(1.jpg);
}

---

Screenshot