下拉菜单 - > 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; 
}

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;}

这当然是一个非常基本的例子！你可以用下拉菜单做一些非常好的事情。

下拉菜单 - > HTML＆CSS，悬停

相关推荐