下拉菜单href修复

问题描述：

我有一点问题，我做了一些下拉菜单的代码，因为我需要了解它，但我发现了一些错误，我不能修复它，我试图约一小时，但仍然没有，如果你是试图从下面的下拉列表：破坏Postava我坏，尝试移动你的光标到破坏的右上角，然后你会看到HREF LINK不工作+下拉“Postava II”，只有当你下载将光标移动到“Postava I”上，你能帮我解决它吗？这里是http://jsfiddle.net/3qLu04sh/下拉菜单href修复

HTML

<!DOCTYPE html> 
<html lang="cs-CZ"> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="generator" content="Rostislav Danko"> 
     <link rel="stylesheet" href="Web.css"> 
     <title>Rostislav Danko</title> 
    </head> 
    <body> 
     <div id="web"> 
      <div id="menu"> 
       <nav> 
        <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_tbb1.html">The Breaking bad</a> 
            <ul id="ulid2"> 
             <li class="liclass"><a href="postava.html">PostavaI</a> 
              <ul id="ulid3"> 
               <li class="liclass"><a href="filmy_a_serialy_tbb1.html">PostavaII</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </body>  
</html>

CSS

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; 
} 
.liclass a { 
    width: 294px; 
} 
#ulid { 
    width: 1200px; 
    height: 55px; 
    margin-left: -43px; 
} 
#ulid1 { 
    margin-left: -44px; 
    position: relative; 
    top: 10px; 
    display: none; 
} 
#ulid1 a { 
    height: 40px; 
} 
.liclass:hover #ulid1 { 
    display:block; 
} 
#ulid2 { 
    margin-left: 257px; 
    position: relative; 
    top: -58px; 
    display: none; 
} 
#ulid2 { 
    height: 40px; 
} 
#ulid1:hover #ulid2 { 
    display:block; 
} 
#ulid3 { 
    margin-left: -43px; 
    position: relative; 
    top: -3px; 
    display: none; 
} 
#ulid3 { 
    height: 40px; 
} 
#ulid2:hover #ulid3 { 
    display:block; 
} 
#menu { 
    position: relative; 
    top: 100px; 
    width: 1200px; 
} 
#web { 
    border-style: solid; 
    background: #0F3; 
    width: 1194px; 
    height: 800px; 
    margin:0 auto; 
    position: relative; 
}

你到底想要什么？当用户点击父母（这里是坏的）时，它会显示所有孩子（这里是postava l和postava ll）。是吗？ – diEcho 2014-10-06 10:28:41

diEcho，它不是，cuz postava II必须是postava我的孩子，但是当我将鼠标光标移到破坏的右上角时，它会显示我postava II，但它只有在我移动我的cursot时才会显示到Postava我 – 2014-10-06 10:30:45

关闭您的UL和LI标签 – 2014-10-06 10:34:01

答

看起来你UL＃ulid2是重叠的，它包含了 “绝命毒师” 的链接列表项。通过删除这些行

#ulid2 { 
    height: 40px; 
}

你应该能够解决这个问题。我相信你可以用其他许多方式来解决它，但这似乎是一个窍门。

谢谢，作品:)） – 2014-10-06 10:31:49

相关推荐