下拉菜單 - > HTML＆CSS，懸停

我需要使下拉菜單，但即時有點新手，所以我不知道如何，你能幫我嗎？有人？我需要讓下拉菜單從filmy_a_serialy.html HTML代碼：第一下拉菜單 - > HTML＆CSS，懸停

<div id="menu"> 
     <ul id="ulid"> 
      <li class="liclass"><a href="index.html">Hlavní stránka</a></li> 
      <li class="liclass"><a href="filmy_a_serialy.html">Filmy a seriály</a> 
       <ul id="ulid1"> 
        <li class="liclass"><a href="Filmy_a_serialy_tbb.html">TBB</a> 
       </ul> 
      <li class="liclass"><a href="hry_na_pc_co_me_bavi.html">Hry na PC</a> 
      <li class="liclass"><a href="moje_konicky.html">Moje koníčky</a></li> 
     </ul> 
    </div> 

ul li { 
display: block; 
float: left; 
background: #0F6; 
border-radius: 0px; 
border: 3px solid #000;  
} 
ul li a { 
text-decoration: none; 
color: #000; 
display: block; 
padding: 10px 5px 5px 5px; 
text-align: center; 
font-size: 25px; 
} 
ul li:hover { 
    background: #0FF; 
} 
ul li:hover a { 
color: #000; 
} 
.liclass { 
width: 294px; 
height: 50px; 
} 
#ulid { 
width: 1200px; 
height: 55px; 
margin-left: -43px; 
}

來源

2014-10-02 Rostislav Danko

By * help me *你的意思是*代碼爲我* *？ – LcSalazar 2014-10-02 14:04:43

ofc不是，我做了這個，我想讓你幫我擴展代碼，使其從filmy_a_serialy.html下拉菜單，我只是不知道在哪裏以及如何放置懸停 – 2014-10-02 14:06:15

@RostislavDanko試試這個 - http：// jsfiddle。 net/kadut59h/ – Anonymous 2014-10-02 14:10:26

第一件事，你的孩子UL需要走在同級別的A，無論是李內

<div id="menu"> 
    <ul id="ulid"> 
     <li class="liclass"><a href="index.html">Hlavní stránka</a></li> 
     <li class="liclass"> 
      <a href="filmy_a_serialy.html">Filmy a seriály</a> 
      <ul id="ulid1"> 
       <li class="liclass"><a href="Filmy_a_serialy_tbb.html">TBB</a> 
      </ul> 
     </li> 
     <li class="liclass"><a href="hry_na_pc_co_me_bavi.html">Hry na PC</a> 
     <li class="liclass"><a href="moje_konicky.html">Moje koníčky</a></li> 
    </ul> 
</div>

那就試試下面的CSS：

ul li { 
    position:relative; 
    float: left; 
} 
ul li ul { 
    position:absolute; 
    top: 100%; 
    left: 0; 
    width: 300px; 
}

這將絕對定位的子菜單，但相對於父李。它將100％置於頂部（即低於它）和左邊。你可能會想隱藏它直到懸停：

ul li ul {display:none;} 
ul li:hover ul {display:block;}

這當然是一個非常基本的例子！你可以用下拉菜單做一些非常好的事情。

來源

2014-10-02 14:15:39 Mike

下拉菜單 - > HTML＆CSS，懸停

回答

相關問題