這段時間，在學習前端，特此做個筆記。

 <!--導航欄-->
    <div class="titlediv">
        <img class="logo" src="../res/logo.png">
        <ul class="titlediv_ul">
            <li class="drop-down">
                <a href="#ruanjian"> 電腦軟體</a>
                <ul class="drop-down-content"
 
>
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
            <li class="drop-down"
 
><a href="#ruanjian"> 驅動下載</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a>
 
</li>
                </ul>
            </li>
            <li class="drop-down"><a href="#ruanjian"> 網管租賃</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
            <li class="drop-down"><a href="#ruanjian"> 軟體寶庫</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
            <li class="drop-down"><a href="#ruanjian"> 官方論壇</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
        </ul>
    </div>

css裡面

/*導航欄*/
.titlediv {
    background-color: white;
    height: 60px;
    width: 100%;
    float: left;
    padding: 0px;

    text-align: center; /*字型居中*/
    margin: auto;
}

.logo {
    width: auto;
    float: left;
    height: auto;
    margin-left: 50px;
}

.titlediv_ul {
    list-style-image: url(img/5.jpg);
    list-style-type: none; /*隱藏點*/
    margin: 0;
    margin-left: 100px;
    padding: 0;
    float: left;
}

.titlediv_ul > li {
    /*white-space: nowrap;*/
    /*橫向*/
    float: left;
}

.drop-down > a {
    display: block; /*設定塊級*/
    width: 100px;
    line-height: 60px; /*保證文字垂直居中*/
    font-size: 14px;
    color: #000000;
    text-decoration: none;
}

/*懸浮效果*/
.drop-down > a:hover {
    color: #60baed;
}

/*下拉選單*/
.drop-down {
    /*position: relative;*/
    /*  white-space: nowrap;!**!*/
}

.drop-down-content {
    padding: 0;
    display: none; /*1 先隱藏*/
}

.drop-down-content > li {
    list-style-type: none; /*去點樣式*/
}

.drop-down:hover .drop-down-content {
    display: block; /*2顯示*/
    background-color: #60baed;
}

.drop-down-content > li > a {
    display: block; /*設定塊級*/
    width: 100px;
    line-height: 60px; /*保證文字垂直居中*/
    font-size: 14px;
    color: #110d06;
    text-decoration: none;
}

.drop-down-content > li > a:hover {
    color: #e5f4fd;

}