0

我是网页设计的新手，我正在尝试将我在网站上找到的 jQuery 菜单示例集成到我的网页中。

但是，显然 CSS 出了点问题，因为当我评论与菜单相关的 CSS 时，jQuery Hover 方法正在工作。但是，使用那个 CSS，它不起作用。

使用 Firefox 和 Chrome 最新版本在 Windows 上测试。令人惊讶的是，这件事在 IE 上运行良好......

在此处找到我的网页：http: //jsfiddle.net/qHVE7/ （我已评论菜单 CSS。取消评论以查看问题。）
这是我已评论的 CSS。 

/*Menu CSS*/
/*ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 100%;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background:url(images/topnav_s.gif) repeat-x;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}

ul#topnav li:hover { background: #1376c9 url (images/topnav_a.gif) repeat-x; }
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 970px;
    background: #1376c9;
    color: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}*/
/*Menu CSS Ends*/

原始子菜单代码在这里：http: //jsfiddle.net/7DXzP/

我哪里错了？因为我基本上是从示例中复制粘贴了 javascript 和 CSS。

4

2 回答 2

1

在css中为类链接添加边距，例如

.links {
   position: relative;
   margin-top:250px; 
}

<div class="links">菜单上没有边距

于 2013-03-19T08:39:24.327 回答
0

问题是链接 div（所有浮动都在进行）位于菜单顶部，这就是悬停事件不会发生的原因。添加背景颜色：红色；向班级展示了这一点。添加一个浮点数：左；到班级确保它出现在菜单下方，因此它再次起作用。

.links {
   float:left;
   position: relative;
}
于 2013-03-19T10:24:22.710 回答