html部分
<nav>
<ul>
<li><a href="#">首頁</a>
<ul class="second_menu">
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
</ul>
</li>
<li><a href="#">產(chǎn)品</a>
<ul class="second_menu">
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
</ul>
</li>
<li><a href="#">關(guān)于我們</a>
<ul class="second_menu">
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
</ul>
</li>
<li><a href="#">聯(lián)系我們</a>
<ul class="second_menu">
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
</ul>
</li>
</ul>
</nav>
-
二級(jí)菜單的放置位置
不要把二級(jí)菜單放到a標(biāo)簽里面翻擒，如果二級(jí)菜單里面也有a標(biāo)簽的話，會(huì)導(dǎo)致元素錯(cuò)位汪拥。
二級(jí)菜單放置位置
css部分
- 給a標(biāo)簽設(shè)置樣式的時(shí)候千萬不要忘記a標(biāo)簽是一個(gè)行內(nèi)元素达传。
a標(biāo)簽是一個(gè)行內(nèi)元素，所有設(shè)置的上下padding顏色會(huì)有效果迫筑，但是不會(huì)擴(kuò)大空間宪赶，給人產(chǎn)生錯(cuò)覺。
a標(biāo)簽的行內(nèi)元素 - 關(guān)于絕對(duì)定位沒有設(shè)置偏移量時(shí)候的位置解析铣焊。
沒有設(shè)置偏移量
不設(shè)置偏移量的時(shí)候元素相對(duì)于自身的位置不動(dòng)逊朽。但是IE不支持。但是設(shè)置了偏移量后就相對(duì)與body(除了position:static的其他屬性的父元素定位)
設(shè)置了偏移量
position:relative要放到對(duì)于的li上曲伊，進(jìn)行定位，不然會(huì)都重合在一起。
相對(duì)定位放到li標(biāo)簽上 - 二級(jí)菜單知道大致字?jǐn)?shù)可以通過
width: 6em(例子)來控制
可以通過padding-right: ...和width來擴(kuò)大二級(jí)菜單的大小坟募，但是width會(huì)固定寬度岛蚤，不管字?jǐn)?shù)大小，都會(huì)一樣大懈糯，好看一點(diǎn)涤妒。padding-right:就會(huì)靈活一點(diǎn)，但是對(duì)于字?jǐn)?shù)不一樣的二級(jí)菜單會(huì)出現(xiàn)寬度的不同赚哗。 - 添加hover的時(shí)候要給一級(jí)菜單的li標(biāo)簽添加而不是給a標(biāo)簽添加
給li標(biāo)簽添加偽類
因?yàn)閍標(biāo)簽和.second_menu是兄弟標(biāo)簽她紫，不能用父子標(biāo)簽顯示，這個(gè)是一個(gè)容易忽視的點(diǎn)
兄弟標(biāo)簽
一般都是可以給li標(biāo)簽添加hove來控制元素的效果
-
**記住雖然給二級(jí)菜單添加了position:absolute屿储，但是它還是包含在li標(biāo)簽中贿讹，所有我們可以給li標(biāo)簽添加偽類，讓鼠標(biāo)移動(dòng)到二級(jí)菜單的時(shí)候够掠，給a標(biāo)簽做一定的效果民褂。
**
給li標(biāo)簽添加偽類離開后影響a標(biāo)簽
擴(kuò)展
多級(jí)菜單
