Question

此代码假设当鼠标放在电影上时显示电影，但这里的问题是电影菜单显示在鼠标放在标题的哪个位置？

C-h f desktop-save-mode RET

CSS代码

    <div class="navbar-collapse collapse">
                    <ul> class="nav navbar-nav">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About</a></li>
                    <li><a runat="server" href="~/Contact">Contact</a></li>
                     <li>
                          <a href="#">Movies</a>

                         <ul class="sub-menu">
                <li><a href="#">In Cinemas Now</a></li>
                <li><a href="#">Coming Soon</a></li>
                <li><a href="#">On DVD/Blu-ray</a></li>
                <li><a href="#">Showtimes &amp; Tickets</a></li>

            </ul>

Answer 1

您需要将悬停添加到影片元素。这有效：

HTML：

 <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About</a></li>
                    <li><a runat="server" href="~/Contact">Contact</a></li>
                     <li id="movies">
                          <a href="#">Movies</a>

                         <ul class="sub-menu">
                <li><a href="#">In Cinemas Now</a></li>
                <li><a href="#">Coming Soon</a></li>
                <li><a href="#">On DVD/Blu-ray</a></li>
                <li><a href="#">Showtimes &amp; Tickets</a></li>

            </ul>

CSS：

.nav .sub-menu {      

         display:none;
    }

    #movies:hover .sub-menu {
    display:block;
    }

的jsfiddle：

https://jsfiddle.net/yd8ddv4x/

CSS错误地显示菜单

1 个答案: