Question

甚至讨厌问什么无疑是一个非常容易的问题，但我看不出什么是错的。

试图让我的子导航飞出“向上”而不是“向下”。向下工作完美。我尝试添加左侧和底部值，并在Dreamweaver中我的导航栏看起来正确，但是当我运行它时，一切都出错了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body, td, th {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}

#navBar {
    margin: 0;
    padding: 0;
    overflow:auto;  
    position:relative;
}

#navBar li {
    float: left;
    list-style: none;
    font-weight:bold;
    background: none;
    text-align:left;
    width:90px;
    margin-right:36px;
    position:relative;      // I guess I need this
}

#navBar li.last { margin-right:0px }

#navBar li a {
    display: block;
    padding: 5px;
    text-decoration: none;
    border:none;
    border-bottom: 2px solid #d4d4d4;
    color: #575757;
    white-space: nowrap;
}

#navBar li a:hover {
    border-bottom: 2px solid #ee2c23;
    color: #ee2c23;
}

#navBar li ul {
    margin: 0;
    padding: 0;
    position: absolute;       /* I added this */
    left: 0;                  /* and this */
    bottom: 0px;             /* and this */
    visibility: hidden;
    border-top: 1px solid white;
    background:black;
    width:120px;
    filter: alpha(opacity=80);
    opacity: 0.8;

}

#navBar li ul li {
    float: none;
    display: inline;
    text-align:left;
    border:none;
    background: #000;
}

#navBar li ul li a {
    width: auto;
    border:none;
    color: #fff;
}

#navBar li ul li a:hover {
    width: auto;
    border:none;
    text-decoration:underline;
    color: #fff;
}

#nav {
    width:753px;
    background: #fff;
    margin-top:1px;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function navBar_open()
{  navBar_canceltimer();
   navBar_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function navBar_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function navBar_timer()
{  closetimer = window.setTimeout(navBar_close, timeout);}

function navBar_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open)
   $('#navBar > li').bind('mouseout',  navBar_timer)});

document.onclick = navBar_close;
</script>
</head>
<body>
<br /><br /><br /><br /><br /> <!-- some padding to see where the menu *should* go -->
<div id="nav">
  <ul id="navBar">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a> <!-- when you hover, this should appear above this li -->
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </li>
    <li><a href="#">Link</a></li>
  </ul>
</div>
</body>
</html>

我发布了一个链接，但目前没有开发服务器访问权限。

如果你删除我评论过的行，这对于“下拉”菜单来说很好 ..但我想要一个“下拉”菜单。

谢谢！

Answer 1

为什么不使用已经制作的菜单？

CSS Play有很多选择...

等...

编辑：我确实在CSS中发现了问题...在#navBar定义中删除了overflow: auto，它阻止了子菜单的显示

#navBar {
    margin: 0;
    padding: 0;
    position:relative;
}

并将0的底部更改为2em

#navBar li ul {
 margin: 0;
 padding: 0;
 position: absolute;
 left: 0;
 bottom: 2em;
 visibility: hidden;
 border-top: 1px solid white;
 background:black;
 width:120px;
 filter: alpha(opacity=80);
 opacity: 0.8;
}

Answer 2

假设一个绝对定位的对象，你将其底部设置为元素的position（）。

$("#menuitem").hover(function() {
   $("#submenu").css({"position" : "absolute", "bottom" : $(this).position().top, "left" : $(this).position().left });
});

jquery nav，css定位

2 个答案: