Question

我正在学习使用css制作垂直菜单（我必须说这些代码大部分是从谷歌复制的）。

当我将鼠标放在list1上时，项目显示在后面，而LargeNameList2则是list1的项目（因为“LongNameList2”具有更长的名称）。所以我需要的是两件事中的一件（如果可能的话，两者都是）：

- 如何“带到前面”列表项？，因此它们显示在LargeNameList2上。

- 当我将鼠标放在list1上时，如何使下面的其他列表（列表2和3）关闭？（当我将鼠标移到list2时列表3）？

代码HTML：

<head runat="server">
    <title></title>

    <style type="text/css">     

        #nav{
            list-style:none;
            font-weight:bold;
            margin-bottom:10px;   
            float:left;
            width:100%;    
        }
        #nav li{               
            margin-right:10px;
            position:relative;
        }
        #nav a{
            /*display:block;*/
            padding:5px;
            color:#fff;
            background:#333;
            text-decoration:none;
        }
        #nav a:hover{
            color:#fff;
            background:#6b0c36;
            text-decoration:underline;
        }

       /*--- DROPDOWN ---*/
        #nav ul{
            background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
            background:rgba(255,255,255,0);/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
            list-style:none;
            position:absolute;
            left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
        }
        #nav ul li{
            padding-top:5px; 
            float:none;
        }
        #nav ul a{
            white-space:nowrap; 
        }
        #nav li:hover ul{ 
            left:0;
        }
        #nav li:hover a{ 
            background:#6b0c36;
            text-decoration:underline;
        }
        #nav li:hover ul a{ 
            text-decoration:none;
        }
        #nav li:hover ul li a:hover{ 
            background:#333;
        }

    </style>        

</head>

<body>

    <ul id="nav">

    <li>
        <a href="#">List1›</a>
        <ul style="margin-left: 25px">
            <li><a href="#">Item1</a></li>            
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
        </ul>
    </li>
    <br />
    <br />
    <li >    
        <a href="#">LongNameList2›</a>

        <ul style="margin-left: 25px">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
        </ul>

    </li>
    <br />
    <br />
    <li>    
        <a href="#">List3›</a>
        <ul style="margin-left: 25px">
           <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
        </ul>
    </li>

</ul>

</body>

Answer 1

将z-index添加到此 -

    #nav li:hover ul{ 
        left:0;
        z-index:1000; // Added this line.
    }

z-index是项目的z坐标。对于离用户越远越近越消极。

Answer 2

您应该将position:relative和z-index: 101添加到ul以使这两件事发生：

#nav li:hover ul{ 
  left:0;
  position: relative;
  z-index: 101;
}

这是一个小提琴：http://jsfiddle.net/pj9Gd/

如何将<li>放在<ul> </ul> </li>上

2 个答案: