0

我已经厌倦了从这个 tuts和演示中构建水平下拉菜单

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

在此处输入图像描述

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

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

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

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

在此处输入图像描述

这里jsfiddle

4

6 回答 6

0

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

于 2013-09-16T10:52:50.470 回答
0

删除 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/

于 2013-09-16T10:53:47.020 回答
0

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

 margin-top:80px;

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

于 2013-09-16T10:54:58.387 回答
0

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

于 2013-09-16T10:55:05.313 回答
0

将 CSS.has_sub_sub ul更改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

于 2013-09-16T10:57:13.223 回答
0

试试这个 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>
于 2013-09-16T10:58:04.810 回答