CSS下拉菜单建议

时间:2016-05-10 20:13:19

标签: css

您好我正在尝试更改我网站上的下拉菜单,以便它直接在链接下方显示下来并显示(当盘旋时)第二级别类别到侧面而不是垂直

这是代码

/**
* Wide drop-down menu
*/



/* 1st level only
-------------------------------------------------------------- */
#nav > li:hover > a { position: relative; z-index: 1; /* Pull up above     drop-down box */ }

/* 2nd level only
-------------------------------------------------------------- */
/* 2nd-level links block: with subcategory title and a list of child       categories */
#nav ul.level0 > li {
display:inline-block;
float:none;
vertical-align:top;
padding-top:0;
padding-bottom:15px;
}
#nav ul.level0 > li > a {
margin-bottom:10px;
font-size:16px;
line-height:18px;
}

/* 2nd level+
-------------------------------------------------------------- */
#nav ul li { /*float:none;*/ margin-bottom:1px; }
#nav ul li a { float:none; }

/* 3rd level only
-------------------------------------------------------------- */
#nav ul.level1 { position:static; }
#nav ul.level1 > li {
float:none;
background:url(../../../images/infortis/ultra-megamenu/bullet.png) 3px     6px no-repeat;
padding-left:15px;
transition:         background-position 150ms ease-out;
-moz-transition:    background-position 150ms ease-out;
-webkit-transition: background-position 150ms ease-out;
-o-transition:      background-position 150ms ease-out;
}
#nav ul.level1 > li:hover { background-position:6px 6px; }

/* 4th level
-------------------------------------------------------------- */
#nav ul.level2 { margin:7px 0; padding:0; position:static; }
#nav ul.level2 a { font-size:0.9166em; line-height:1.2727em;       /*11px       14px*/ opacity:0.6; }
#nav li.level2:hover ul.level2 a {
opacity:1;
transition:         opacity 150ms ease-out;
-moz-transition:    opacity 150ms ease-out;
-webkit-transition: opacity 150ms ease-out;
-o-transition:      opacity 150ms ease-out;
}

/* 4rd level+
-------------------------------------------------------------- */
#nav ul ul ul li { background:none; padding-left:0; }

非常感谢任何帮助

1 个答案:

答案 0 :(得分:0)

很难通过您提供的代码了解您想要的内容,但是如果您在下拉菜单中给出绝对位置,它应该直接显示在它所在的列表项目下方。