我試圖在CSS中創(chuàng)建一個選項卡菜單，并在默認情況下顯示第一個菜單。當(dāng)你把鼠標(biāo)懸停在其他菜單項上時，我需要它隱藏默認顯示的菜單項，并顯示所選菜單項的菜單項。 如何隱藏懸停時默認顯示的那個？
當(dāng)您將鼠標(biāo)懸停在整個ul上時，您會想要隱藏第一個li。然后將li:hover調(diào)整為ul:hover li:hover 這將完成li:first-child在沒有懸停時繼續(xù)顯示。 抱歉，在我的代碼片段中，我必須轉(zhuǎn)換為純CSS才能運行代碼。 另外，我重新排列了級聯(lián)的規(guī)則，使其按您所希望的方式工作。 .sau-c-nav-side nav ul li{ height: 50px; } .sau-c-nav-side nav li:first-child .sau-c-nav-side__sub{ display: block; } .sau-c-nav-side nav ul:hover li:first-child .sau-c-nav-side__sub{ display: none; } .sau-c-nav-side nav ul:hover li:hover .sau-c-nav-side__sub{ display: block; } .sau-c-nav-side nav .sau-c-nav-side__sub{ display: none; position: absolute; top:80px; bottom: 0; left:150px; } <div class="sau-c-nav-side"> <nav> <ul> <li><a href="#">Menu1</a> <ul class="sau-c-nav-side__sub active"> <li><a href="#">item1-menu1</a></li> <li><a href="#">item2-menu1</a></li> <li><a href="#">item3-menu1</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul class="sau-c-nav-side__sub"> <li><a href="#">item1-menu2</a></li> <li><a href="#">item2-menu2</a></li> <li><a href="#">item3-menu2</a></li> </ul> </li> <li><a href="#">Menu3</a> <ul class="sau-c-nav-side__sub"> <li><a href="#">item1-menu3</a></li> <li><a href="#">item2-menu3</a></li> <li><a href="#">item3-menu3</a></li> </ul> </li> </ul> </nav> </div>
當(dāng)您將鼠標(biāo)懸停在整個
ul上時，您會想要隱藏第一個li。然后將li:hover調(diào)整為ul:hover li:hover這將完成
li:first-child在沒有懸停時繼續(xù)顯示。抱歉，在我的代碼片段中，我必須轉(zhuǎn)換為純CSS才能運行代碼。
另外，我重新排列了級聯(lián)的規(guī)則，使其按您所希望的方式工作。