0

我正在学习仅使用 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›&lt;/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›&lt;/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›&lt;/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>
4

2 回答 2

1

将 z-index 添加到此 -

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

z-index是项目的 z 坐标。离用户较近为正，离用户较远为负。

于 2013-07-26T16:12:38.633 回答
1

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

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

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

于 2013-07-26T16:14:06.317 回答