使用基于關系的選擇器和偽類選擇器

通過使用基于關系的選擇器和偽類選擇器帜慢,你可以構造出復雜的疊加算法。這是一個常用的技巧,比如可以用來創(chuàng)建純CSS無JavaScript的下拉菜單(pure-CSS dropdown menus)。關鍵點就是創(chuàng)建下面這類規(guī)則:
div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

然后將這些規(guī)則應用到下面的HTML結構中:

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="css/style3.css">
  </head>
  <body>
    <div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
  </body>
</html>




最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末基茵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子壳影,更是在濱河造成了極大的恐慌拱层,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宴咧,死亡現(xiàn)場離奇詭異根灯,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門烙肺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纳猪,“玉大人,你說我怎么就攤上這事桃笙∈系蹋” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵搏明,是天一觀的道長鼠锈。 經(jīng)常有香客問我,道長星著,這世上最難降的妖魔是什么脚祟? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮强饮,結果婚禮上,老公的妹妹穿的比我還像新娘为黎。我一直安慰自己邮丰,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布铭乾。 她就那樣靜靜地躺著剪廉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪炕檩。 梳的紋絲不亂的頭發(fā)上斗蒋,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音笛质,去河邊找鬼泉沾。 笑死,一個胖子當著我的面吹牛妇押,可吹牛的內容都是我干的跷究。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼敲霍,長吁一口氣:“原來是場噩夢啊……” “哼俊马!你這毒婦竟也來了?” 一聲冷哼從身側響起肩杈,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤柴我,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后扩然,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體艘儒,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了彤悔。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嘉抓。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖晕窑,靈堂內的尸體忽然破棺而出抑片,到底是詐尸還是另有隱情,我是刑警寧澤杨赤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布敞斋,位于F島的核電站,受9級特大地震影響疾牲,放射性物質發(fā)生泄漏植捎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一阳柔、第九天 我趴在偏房一處隱蔽的房頂上張望焰枢。 院中可真熱鬧,春花似錦舌剂、人聲如沸济锄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽荐绝。三九已至,卻和暖如春避消,著一層夾襖步出監(jiān)牢的瞬間低滩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工岩喷, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留恕沫,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓纱意,卻偏偏與公主長得像昏兆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子妇穴,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內容

  • CSS有一套用于描述其語言的術語爬虱。 在CSS的術語中,上面這段代碼被稱為一條規(guī)則(rule)腾它。這條規(guī)則以選擇器st...
    勿以浮沙筑高臺閱讀 394評論 0 0
  • 【序】每年的七月初七跑筝,是中華之地傳統(tǒng)節(jié)日,又稱乞巧節(jié)瞒滴、七巧節(jié)等等曲梗,源于漢朝赞警,后經(jīng)歷朝歷代的發(fā)展演繹,融入牛郎織女的...
    月出宛丘閱讀 220評論 0 0
  • 有時候我也想寫點關于愛的字句, 可是真到提起筆,鋪好紙的時候,卻不知該往哪兒寫起... 索性就隨便寫點,各位看官也...
    Dante丶閱讀 693評論 0 0