Question

我在页面上有以下div。在导航ID中我希望当我将鼠标悬停在li上时，它下面的div显示为子菜单项。使用CSS。

<div id="nav">
            <ul>
                <li class="first">ABOUT US</li>
                <li id="showsub">LABEL
                <div id="submenu">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="lister">
                                <ul>
                                    <li onmouseover="showsubcon('subclothes')">CLOTHES</li>
                                    <li onmouseover="showsubcon('subshoes')">SHOES</li>
                                    <li onmouseover="showsubcon('subacces')">ACCESSORIES</li>
                                </ul>   
                            </td>
                            <td style="box-shadow: 0px 0px 100px #B60101 inset; width: 100%; padding:5px;">
                                <div id="subcloths">
                                    <p> CLOTHES </p>                    
                                </div>
                                <div id="subshoes">
                                    <p>SHOES</p>
                                </div>
                                <div id="subacces">
                                    <p>ACCESSORIES</p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
             </li>
             <li>OFFERS</li>
             <li>SPECIAL DISCOUNTS</li>
             <li>CONTACT US</li>
            </ul>
        </div>

Answer 1

首先停止使用ID - 由于很有可能会重复某些样式，所以您应该将ID转换为类。

<div id="nav">
            <ul>
                <li class="first">ABOUT US</li>
                <li class="showsub">LABEL
                <div class="submenu">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="lister">
                                <ul>
                                    <li onmouseover="showsubcon('subclothes')">CLOTHES</li>
                                    <li onmouseover="showsubcon('subshoes')">SHOES</li>
                                    <li onmouseover="showsubcon('subacces')">ACCESSORIES</li>
                                </ul>   
                            </td>
                            <td style="box-shadow: 0px 0px 100px #B60101 inset; width: 100%; padding:5px;">
                                <div id="subcloths">
                                    <p> CLOTHES </p>                    
                                </div>
                                <div id="subshoes">
                                    <p>SHOES</p>
                                </div>
                                <div id="subacces">
                                    <p>ACCESSORIES</p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
             </li>
             <li>OFFERS</li>
             <li>SPECIAL DISCOUNTS</li>
             <li>CONTACT US</li>
            </ul>
        </div>

现在......就CSS而言，这是您需要的功能的有限示例......

div.submenu { display: none; }

li.showsub:hover div.submenu { display: block; }

Answer 2

是的css功能有限。一个使用css的简单示例。

HTML 的

<ul>
    <li>item</li>
    <li>item
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
    </li>
    <li>item</li>
</ul>

CSS

ul li {
    float:left;
    padding:20px;
}
ul li ul {
    display:none;
    position:absolute;

}
ul li:hover ul{
    display:block;
}

ul li ul li{
    float:left;
    clear:both;
}

见http://jsfiddle.net/8E52m/3/

使用CSS在悬停时显示HTML标记

2 个答案: