為什么hover設(shè)置給.nav-li就能顯示二級(jí)菜單，而設(shè)置給tit就不行，而且二級(jí)菜單都是一個(gè)class類，hover怎么知道顯示的是哪個(gè)一級(jí)菜單下的二級(jí)菜單，如果這樣寫，不應(yīng)該是當(dāng)鼠標(biāo)移到一個(gè)1級(jí)菜單下時(shí)，所有的二級(jí)菜單都應(yīng)該被顯示嗎<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>position</title>? ? <style>? ? * {? ? ? ? padding: 0;? ? ? ? margin: 0;? ? }? ? .page {? ? ? ? width: 100%;? ? ? ? height: 4043px;? ? ? ? background: url("mooc.png") center top no-repeat;? ? }? ? .nav {? ? ? ? width: 160px;? ? ? ? height: 205px;? ? ? ? position: fixed;? ? ? ? left: 0;? ? ? ? top: 50%;? ? ? ? margin-top: -103px;? ? ? ? font-family: 'Miscrosoft YaHei';? ? }? ? .nav-li {? ? ? ? width: 160px;? ? ? ? height: auto;? ? ? ? border-bottom: 1px solid #FFF;? ? ? ? background: #333;? ? ? ? text-align: center;? ? ? ? line-height: 40px;? ? ? ? color: #FFF;? ? ? ? font-size: 16px;? ? ? ? cursor: pointer;? ? }? ? .tit {? ? ? ? width: 160px;? ? ? ? height: 40px;? ? }? ? .tit:hover ul {? ? ? ? display: block;? ? }? ? .nav-li ul {? ? ? ? width: 160px;? ? ? ? height: auto;? ? ? ? background: #FFF;? ? ? ? display: none;? ? }? ? .nav-li ul li {? ? ? ? width: 160px;? ? ? ? height: 40px;? ? ? ? border-bottom: 1px dashed #666;? ? ? ? color: #333;? ? ? ? text-align: center;? ? ? ? line-height: 40px;? ? ? ? position: relative;? ? }? ? .nav-li ul li:hover .list-3 {? ? ? ? display: block;? ? }? ? .list-3 {? ? ? ? width: 160px;? ? ? ? height: auto;? ? ? ? position: absolute;? ? ? ? left: 160px;? ? ? ? top: 0px;? ? ? ? display: none;? ? }? ? .list-3Dom {? ? ? ? width: 160px;? ? ? ? height: 40px;? ? ? ? background: #444;? ? ? ? border-bottom: 1px solid #FFF;? ? ? ? text-align: center;? ? ? ? line-height: 40px;? ? ? ? color: #FFF;? ? }? ? </style></head><body>? ? <div class="page">? ? ? ? <div class="nav">? ? ? ? ? ? <div class="nav-li">? ? ? ? ? ? ? ? <div class="tit">慕課網(wǎng)的標(biāo)題</div>? ? ? ? ? ? ? ? <ul>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3">? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3">? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3">? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="list-3Dom">三級(jí)欄目</div>? ? ? ? ? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? </ul>? ? ? ? ? ? </div>? ? ? ? ? ? <div class="nav-li">? ? ? ? ? ? ? ? <div class="tit">慕課網(wǎng)的標(biāo)題</div>? ? ? ? ? ? ? ? <ul>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? </ul>? ? ? ? ? ? </div>? ? ? ? ? ? <div class="nav-li">? ? ? ? ? ? ? ? <div class="tit">慕課網(wǎng)的標(biāo)題</div>? ? ? ? ? ? ? ? <ul>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? </ul>? ? ? ? ? ? </div>? ? ? ? ? ? <div class="nav-li">? ? ? ? ? ? ? ? <div class="tit">慕課網(wǎng)的標(biāo)題</div>? ? ? ? ? ? ? ? <ul>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? </ul>? ? ? ? ? ? </div>? ? ? ? ? ? <div class="nav-li">? ? ? ? ? ? ? ? <div class="tit">慕課網(wǎng)的標(biāo)題</div>? ? ? ? ? ? ? ? <ul>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? ? ? <li>? ? ? ? ? ? ? ? ? ? ? ? 二級(jí)欄目? ? ? ? ? ? ? ? ? ? </li>? ? ? ? ? ? ? ? </ul>? ? ? ? ? ? </div>? ? ? ? </div>? ? </div></body></html>
3 回答
奮斗好青年
TA貢獻(xiàn)69條經(jīng)驗(yàn) 獲得超30個(gè)贊
首頁你要理解hover的含義先,hover樣式寫肯定是對(duì)于下一層,因?yàn)槟愕膖it跟二級(jí)菜單是同級(jí)的關(guān)系,用css去寫hover肯定是實(shí)現(xiàn)不了的,如果你一定要tit可以借助js去寫呀
- 3 回答
- 0 關(guān)注
- 1274 瀏覽
添加回答
舉報(bào)
0/150
提交
取消