文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery导航、css定位

问jquery导航、css定位
EN

Stack Overflow用户

提问于 2009-12-10 12:38:21

回答 2查看 427关注 0票数 1

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

试着让我的潜艇飞出“向上”而不是“向下”。往下走是很完美的。我试着添加左边和底部的值，在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>

我会发布一个链接，但目前无法访问开发服务器。

如果您删除了我评论过的行，这对于一个“下拉”menu..but (我想要一个“下拉”菜单)来说很好。

谢谢!

jquery

css

navigation

回答 2

Stack Overflow用户

发布于 2009-12-10 14:24:33

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

CSS播放有一个巨大的选择..。

专业拉车
拉起
骨架向上

等等。

编辑:我确实在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;
}

票数 1

Stack Overflow用户

发布于 2009-12-10 14:29:46

假设一个绝对定位的对象，您可以将其底部设置为元素的位置()。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1880724

复制

相似问题

问jquery导航、css定位
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery导航、css定位EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery导航、css定位
EN