Question

我已经累了从this tuts和demo

建立水平下拉菜单

我希望菜单看起来像这样：

enter image description here

我希望子菜单显示在右侧父菜单http://alistapart.com/article/horizdropdowns#snippet4

中

下一步是子菜单。我们希望当该项目悬停时，每个子菜单都显示在其父菜单项的右侧。

li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
}

但我的子菜单没有出现在其父菜单的右侧，如下所示：

enter image description here

here jsfiddle

Answer 1

包含子菜单的目录项必须具有position：relative或position：absolute才能使事物看起来相对于它的偏移顶部。

Answer 2

删除ul隐藏列表的现有样式，并添加以下类：subdrop-list

然后添加这个CSS：

.subdrop-list {
    display: none;
    position: relative;
}
.subdrop-list ul {
    position: absolute;
    top: 0;
    right: 0;
}

JSFiddle：http://jsfiddle.net/4jVtw/3/

Answer 3

我希望这会有所帮助 - 只需添加最后一个css

 margin-top:80px;

http://jsfiddle.net/4jVtw/4/

Answer 4

只需使用margin-top:35px;代替top:0;

Answer 5

将.has_sub_sub ul的CSS更改为margin-top : -41px;而不是top : 0

.sidebar #nav .has_sub ul .has_sub_sub ul {
    position: absolute;
    left: 231px;
    width: 230px;
    margin-top: -41px;
    display: none;
    background: #efefef url("http://responsivewebinc.com/premium/macadmin/img/cream.png") repeat;
}

JSFiddle

Answer 6

试试这个 http://jsfiddle.net/4jVtw/5/

<!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>
<title>Horizontal Drop Down</title>

<script type="text/javascript" >
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
<style type="text/css">

body {
    font: 11px verdana;
}
ul {
    border-bottom: 1px solid #CCCCCC;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 150px;
}
ul li {
    position: relative;
}
li ul {
    display: none;
    left: 149px;
    position: absolute;
    top: 0;
}
ul li a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #CCCCCC #CCCCCC -moz-use-text-color;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    color: #777777;
    display: block;
    padding: 5px;
    text-decoration: none;
}
* html ul li {
    float: left;
    height: 1%;
}
* html ul li a {
    height: 1%;
}
li:hover ul, li.over ul {
    display: block;

}

</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Dashboard</a></li> 

  <li><a href="#">Catalog</a> 
    <ul> 
      <li><a href="#">Attribute</a></li> 
      <li><a href="#">Attribute Group</a></li> 

    </ul> 
  </li> 

</ul> 
</body>
</html>

水平下拉菜单悬停

6 个答案: