Question

请原谅我标题中的不良解释，我正在努力描述这个问题。请查看http://www.lexiconnect.net/websites/sandyx。

如果您将鼠标悬停在每个菜单项上，您会看到某些类别下面的项目数量多于其他类别。我希望下拉菜单扩展到相对于该类别下的类别项数量的高度。

例如，如果您将鼠标悬停在“关于我们”上，则会有3个项目和大量空间。如果您将鼠标悬停在“产品和服务”上，则会看到6个项目，其下方有正确空间。

以下是下拉菜单的样式： -

    #menu .menuaholder:hover .menudropdownh {
    transition: all ease-in-out 0.7s;
    -ms-transition: all ease-in-out 0.7s;
    -o-transition: all ease-in-out 0.7s;`enter code here`
    -webkit-transition: all ease-in-out 0.7s;
    -moz-transition: all ease-in-out 0.7s;
    visibility: visible;
    height: 580px;
    border-top: 10px solid #e60030;
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    }

    #menu .menudropdownh {
    position:absolute;
    width: 1200px;
    left:-290px;
    height: 0px;
    overflow: hidden;
    transition: all ease-in-out 0.7s;
    -ms-transition: all ease-in-out 0.7s;
    -o-transition: all ease-in-out 0.7s;
    -webkit-transition: all ease-in-out 0.7s;
    -moz-transition: all ease-in-out 0.7s;
    z-index: 0;
    visibility: hidden;
    margin: 0 -500px 0 -500px;
    padding: 0 500px 0 500px;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
    border-top: 1px solid #ccc;
    background: #3c99d5; /* Old browsers */
    background: url(../images/cloud-texture.png) repeat-x 0 100%, -moz-linear-    gradient(top,  #3c99d5 0%, #a5c9e5 100%); /* FF3.6+ */
    background: url(../images/cloud-texture.png) repeat-x 0 100%, -webkit- gradient(linear, left top, left bottom, color-stop(0%,#3c99d5), color- stop(100%,#a5c9e5)); /* Chrome,Safari4+ */
    background: url(../images/cloud-texture.png) repeat-x 0 100%, -webkit-linear-gradient(top,  #3c99d5 0%,#a5c9e5 100%); /* Chrome10+,Safari5.1+ */
    background: url(../images/cloud-texture.png) repeat-x 0 100%, -o-linear-gradient(top,  #3c99d5 0%,#a5c9e5 100%); /* Opera 11.10+ */
    background:  url(../images/cloud-texture.png) repeat-x 0 100%, -ms-linear-gradient(top,  #3c99d5 0%,#a5c9e5 100%); /* IE10+ */
    background: url(../images/cloud-texture.png) repeat-x 0 100%, linear-gradient(to bottom,  #3c99d5 0%,#a5c9e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c99d5', endColorstr='#a5c9e5',GradientType=0 ); /* IE6-9 */
    }

我已经删除了两个选择器上没有工作的高度。然后我放置高度：100％;在那里没有工作。

我最接近的是放置'溢出：可见'，但背景不会在悬停时延伸。

感谢您的帮助。

父下拉菜单需要相对于子选项数量的转换

0 个答案: