如何靈活設置Ul-LI菜單？

Question

當我們單擊此菜單上的id項時，它將覆蓋一些底部菜單項。 取而代之的是，我想要一個靈活的菜單，這意味着放置項不會覆蓋其他任何項。

 #demo { margin: 30px 0 50px 0; font-family: sans-serif; } #demo .wrapper { display: inline-block; width: 180px; height: 20px; position: absolute; } #demo .parent { height: 100%; width: 100%; display: block; cursor: pointer; height: 150%; background: #023b3b; color: white; z-index: 2; position: relative; text-align: center; } #demo .parent:hover, #demo .content:hover ~ .parent { background: #122112; } #demo .content:hover ~ .parent { z-index: 0; } #demo .content { position: absolute; top: 0; display: block; z-index: 1; height: 0; width: 180px; padding-top: 30px; } #demo .wrapper:active .content { height: 100px; z-index: 3; } #demo .content:hover { height: 123px; z-index: 3; } #demo .content ul { background: #339933; margin: 0; padding: 0; overflow: hidden; height: 100%; } #demo .content ul a { text-decoration: none; } #demo .content li:hover { background: #122112; color: white; } #demo .content li { list-style: none; text-align: left; color: white; font-size: 14px; line-height: 30px; height: 30px; padding-left: 10px; } 

 <div id="demo"> <div class="wrapper"> <div class="parent">Dashboard</div> </div><br> <br> <div class="wrapper"> <div class="parent">Apps</div> <div class="content"> <ul> <a href="#"><li>Inbox</li></a> <a href="#"><li>Condact</li></a> <a href="#"><li>Calender</li></a> <a href="#"><li>Other</li></a> </ul> </div> </div><br><br> <div class="wrapper"> <div class="parent">Layouts</div> <div class="content"> <ul> <a href="#"><li>Header</li></a> <a href="#"><li>Aside</li></a> <a href="#"><li>Footer</li></a> <a href="#"><li>Other</li></a> </ul> </div> </div><br><br> <div class="wrapper"> <div class="parent">Widjet</div> </div> </div> 

Answer 1

檢查這是否可以幫助您。 我添加了input和label 。

 #first { float:left; width:15%; color :bisque; border-color: #023b3b; border-style : solid; height: 100%; background-color :#023b3b; } #boa{ height: 5%; width: 20%; float: left; } .bob{ text-indent: 200%; line-height: 210%; font-size: 150%; font-family: sans-serif; color: white; font-weight: bold; } .boc{ text-indent: 4%; color : white; font-size: 83%; font-family: sans-serif; font-weight: normal; } .bod{ color:white; font-size: 100%; font-family: sans-serif; line-height: 200%; list-style-type: none; } #demo { margin: 30px 0 50px 0; font-family: sans-serif; } #demo .wrapper { display: inline-block; width: 180px; } #demo .parent { padding: 5px; display: block; cursor: pointer; background: #023b3b; color: white; position: relative; text-align: center; } #demo .parent:hover, #demo .content:hover ~ .parent { background: #122112; } #demo .content:hover ~ .parent { z-index: 0; } #demo .content { height: 0px; transition: height 0.3s; z-index: 1; width: 180px; } #demo .wrapper input[type=radio] { position: absolute; opacity: 0 } #demo .wrapper:hover input[type=radio]:checked + .content { height: 120px; } #demo .content:hover { height: 123px; z-index: 3; } #demo .content ul { background: #339933; margin: 0; padding: 0; overflow: hidden; height: 100%; } #demo .content ul a { text-decoration: none; } #demo .content li:hover { background: #122112; color: white; } #demo .content li { list-style: none; text-align: left; color: white; font-size: 14px; line-height: 30px; height: 30px; padding-left: 10px; } 

  <div id="first" style="float:left; lngth:60%; "> <p><img src="image1.jpg" id="boa"><span class="bob">First</span></p> <p class="boc" >Main</p> <div id="demo"> <div class="wrapper"> <div class="parent">Dashboard</div> </div><br> <br> <div class="wrapper"> <label for="apps" class="parent">Apps</label> <input type="radio" name="menu" id="apps" /> <div class="content"> <ul> <a href="#"><li>Inbox</li></a> <a href="#"><li>Condact</li></a> <a href="#"><li>Calender</li></a> <a href="#"><li>Other</li></a> </ul> </div> </div><br><br> <div class="wrapper"> <label for="layouts" class="parent">Layouts</label> <input type="radio" name="menu" id="layouts" /> <div class="content"> <ul> <a href="#"><li>Header</li></a> <a href="#"><li>Aside</li></a> <a href="#"><li>Footer</li></a> <a href="#"><li>Other</li></a> </ul> </div> </div><br><br> <div class="wrapper"> <div class="parent">Widjet</div> </div> </div> <p class="boc">Componets</p> <p class="boc">Help</p> <p class="bod">&nbsp; Documents</p> </div> 

Answer 2

您在jquery中添加代碼：

   $("#demo").hide();
     $(".boc").click(function(){
     $("#demo").slideToggle();
   });