水平下拉菜单悬停答案

【问题标题】：Horizontal Drop Down Menu Hover水平下拉菜单悬停
【发布时间】：2013-09-20 11:26:51
【问题描述】：

我已经厌倦了从this tuts 和demo 构建水平下拉菜单

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

我想子菜单出现在右边的父菜单，http://alistapart.com/article/horizdropdowns#snippet4

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

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

但是我有子菜单没有出现在它的父菜单的右边看起来像：

here jsfiddle

【问题讨论】：

您的图片未加载 - 请从 imagur 以外的其他来源重新嵌入

标签： html css

【解决方案1】：

其中包含子菜单的目录项必须具有 position: relative 或 position: absolute 以使事物相对于它的偏移顶部显示。

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

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

 margin-top:80px;

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

【讨论】：

【解决方案4】：

只需使用margin-top:35px; 而不是top:0;

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：