Question

这是我的菜单。当我将鼠标移到最后一个项目上时，我想显示子菜单（在最后一项中）。我只是想用css做这件事，但它不起作用。这是代码

#submenu {
    display: block;
    position:absolute;
    float:right;
    right:26px;
    background-color:#f1f3f5;
    width:21%;
}
#submenu li {
    border-bottom: 1px solid #c2c5c9;
    padding: 5px 5px;
    text-align:right;
}
#submenu li:first-child {
    padding-top: 10px;
}
#submenu li:last-child {
    border-bottom: none;
}
#submenu li a {
    border-right: 0 !important;
    padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
    display:block;
}

<nav>
    <a href="#" target="_self">First item</a>
    <a href="#" target="_self">Second item</a>
    <a href="#" class="last" target="_self">Third item
        <ul id="submenu">
            <li><a href="#">Submenu item 1</a></li>
            <li><a href="#">Submenu item 2</a></li>
            <li><a href="#">Submenu item 3</a></li>
        </ul>                                                       
    </a>
</nav>

当我在最后一个导航项目上鼠标悬停/ mousout时显示/隐藏子菜单是否可能？

Answer 1

您可以这样做：

org.apache.xml.security.encryption.XMLEncryptionException: No transformation given

完整的运行示例：

nav a.last:hover+#submenu { display:block;}

#submenu {
    display: none;
    position:absolute;
    float:right;
    right:26px;
    background-color:#f1f3f5;
    width:21%;
}
#submenu li {
    border-bottom: 1px solid #c2c5c9;
    padding: 5px 5px;
    text-align:right;
}
#submenu li:first-child {
    padding-top: 10px;
}
#submenu li:last-child {
    border-bottom: none;
}
#submenu li a {
    border-right: 0 !important;
    padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
    display:block;
}
nav a.last:hover+#submenu { display:block;}

Answer 2

<a>无法嵌套在另一个<a href="#" class="last" target="_self">Third item</a> <ul id="submenu"> <li><a href="#">Submenu item 1</a></li> <li><a href="#">Submenu item 2</a></li> <li><a href="#">Submenu item 3</a></li> </ul>中。你应该像html一样。

nav .last:hover + #submenu {
    display: block;
}

和css应该是

<nobr class="ms-crm-Form-Title-Data autoellipsis">
  Text - Some Text

Answer 3

＆＃13;

#submenu { display:block; position:absolute;float:right;right:26px;background-color:#f1f3f5;width:21%;}
    #submenu li { border-bottom: 1px solid #c2c5c9; padding: 5px 5px; text-align:right;}
    #submenu li:first-child { padding-top: 10px;}
    #submenu li:last-child { border-bottom: none;}
    #submenu li a {border-right: 0 !important;padding:5px 2px 0 0;}
    #submenu { display:none;}
	nav .parent:hover #submenu { display:block;}

＆＃13;

<html>
<nav>
    <a href="#" target="_self">First item</a>
    <a href="#" target="_self">Second item</a>
    <span class="parent">
	<a href="#" class="last" target="_self">Third item</a>
        <ul id="submenu">
            <li><a href="#">Submenu item 1</a></li>
            <li><a href="#">Submenu item 2</a></li>
            <li><a href="#">Submenu item 3</a></li>
        </ul>                                                       
    </span>
</nav>
</html>

＆＃13;

用css显示子菜单

3 个答案: