Question

我在脑海中想到，添加一个锚标记并不难，当悬停或点击时会导致CSS弹出窗口出现更多链接。

就像现在一样，一组普通的锚标签位于li内部的跨度内。我想将此悬停弹出链接添加到同一位置，与其中一个链接相同，但不是普通链接，请执行弹出按钮。我在网上找到了各种代码，但似乎没有一个在这个地方工作：

<li>
     Introduction to Something
     <span>
          <a target="_blank" href="http://http...file.html">Watch Slideshow</a>
          <a href="javascript:void(window.open('/file/853','file','height=650,width=1000,status=yes,toolbar=no,menubar=no,location=no'));">View File</a>
          <a target="_blank" href="http://file....pdf">Print</a>

          <a href="#">FLY OUT MENU ITEM</a>
     </span>
</li>

Answer 1

我真的不知道飞出的结构如何。弹出窗口通常设置在一个链接中，这样当母链接悬停时，孩子就会出现..

查看我在http://www.feelfabulous.ca/oldindex.php上执行的最新弹出菜单，并分解HTML / CSS。你可以在没有任何javascript等的情况下完成。这里有我的HTML结构（简化）：

<ul id="menu"> 
<li><a href="/" title="Feel Fabulous Mobile Spa Homepage" class="topmenu">Home</a></li> 
<li><a href="/our-story.php" title="About Feel Fabulous Mobile Spa" class="topmenu">About</a> 
        <div class="submenu_container"> 
             <ul> 
                 <li><a href="/our-story.php" class="submenu">our story</a></li> 
                 <li><a href="/meet-our-team.php" class="submenu">meet our team</a></li> 
                 <!--<li><a href="/press.php" class="submenu">press</a></li>--> 
             </ul> 
        </div> 
    </li> 
    <li><a href="/spa-menu.php" title="Our Mobile Spa Menu" class="topmenu">Spa Menu</a></li> 
    <li><a href="/party-packages.php" title="Mobile Spa Party Packages" class="topmenu">Party Packages</a></li> 
    <li><a href="/beauty-kits.php" title="Beauty Kits to Take Home" class="topmenu">Beauty Kits</a></li> 
    <li><a href="/goody-bags.php" title="Goody Bags To Give Out" class="topmenu">Goody Bags</a></li> 
</ul>

所以.submenu_container设置为display：none，然后#menu li：hover .submenu_container设置为display：block。这是一个flyout tyep fo菜单的基本概念。当然.submenu_container是绝对定位的，所以它不会影响页面弹出时的形状和形式。

Answer 2

我发布了一个演示，与{jeffkee的回答在jsbin上没有太大的不同，以显示弹出菜单的可能性有多深，以及它们有多简单。

下面复制（x）html（带注释）：

<ul>
    <li>home</li>
    <li>products
        <ul>
            <li><a href="#">CPUs</a>
                <ul>
                    <li><a href="#">AMD<a>
                        <ul>
                            <li><a href="#">AM2</a></li>
                            <li><a href="#">AM3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Intel</a></li>
                </ul>
            </li>
            <li><a href="#">Motherboards</a></li>
            <li><a href="#">PSUs</a></li>
            <li>Hard drives
                <ul>
                    <li><a href="#">HDD</a></li>
                    <li><a href="#">SSD</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Tracking</li>
</ul>

CSS如下：

ul {list-style-type: none; width: 8em; border: 1px solid #000; padding: 0;}
/* just to set the base-line for the ul, but note the width. It's important. */

ul li {position: relative; border-top: 1px solid #000; margin: 0; padding: 0; }
/* the position: relative is used to allow its child elements to be absolutely positioned */

ul li:first-child {border-top: 0 none transparent; }
/* to avoid a two-pixel border on the first li (1px li-border + 1px ul-border) */

ul li:hover {background-color: #f90; }
/* just to aid visually */

ul ul {position: absolute; top: -1px; left: 8em; display: none; }
/* sets up all ul elements beneath the parent ul, the -px is to counter the movement forced by the border, bear in mind that the li:first-child doesn't *have* a border, so adjust to taste */

ul > li:hover > ul {display: block; }
/* makes the nested list appear if the parent-li is hovered */

简单的CSS飞出列表，不是那么简单？

2 个答案: