无法在li mouseover上打开子菜单

时间:2015-05-26 16:28:28

标签: javascript jquery html css

我想在第一张li ie张照片的鼠标悬停处打开当前菜单右侧的子菜单。

我无法做到这一点。请帮助。任何帮助将不胜感激。

我有这样的子菜单 -

<li><a href="#"><span>Progress</span></a>
    <ul class="sub-menu">
        <li id="id2" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">photographs</span></li>
        <li id="id3" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">CORP</span></li>
        <li id="id4" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">PSU</span></li>
        <li id="id5" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">SSA</span></li>
        <li id="id6" onclick="Reports(this.id)" style="color:white;font-family: 'Open Sans',sans-serif;font-size: 14px;"><span style="margin:0px 5px; word-wrap: break-word; white-space: nowrap">RMSA</span></li>
    </ul>
</li>

这是我正在使用的CSS -

.sub-menu {
    max-height: 0;
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    z-index:9999;
    /*  top: 100%;*/
    transition: max-height .5s .2s;
    -moz-transition: max-height .5s .2s;
    -o-transition: max-height .5s .2s;
    -webkit-transition: max-height .5s .2s;
}

3 个答案:

答案 0 :(得分:0)

使用父

上的:hover选择器

Demo

li:hover .sub-menu {
    max-height: 100%;
}

另外,在演示中,我冒昧地将内联样式移动到css声明中。如果可能的话,应该避免使用内联样式

答案 1 :(得分:-1)

def translate(fmt):
    # escape their markers
    fmt = fmt.replace('{', '{{').replace('}', '}}')

    # translate our markers
    fmt = re.sub(r'\$\((.+?)\)', r'{\1}', fmt)

    # unescape out markers
    fmt = fmt.replace('$$', '$')

    return fmt

obj = lambda: this_is_a_hack
obj.it = 123
translate("$(testing.it)").format(testing=obj)

答案 2 :(得分:-1)

如果您想要使用HTML设置侦听器,就像您使用Gif.joins(:gif_statistics).where(...).order('gif_statistics.status DESC') 一样,那么您正在寻找的属性是onclick

http://www.w3schools.com/jsref/event_onmouseover.asp