Question

我真的为复杂的标题道歉，但我不知道如何改写它。对某些人来说，这并不像听起来那么容易。我有一个固定的DIV菜单，我需要能够通过将鼠标悬停在某些菜单项上来打开子菜单，同时保持我正在构建的动画和响应式设计。辅助菜单粘在固定div的边缘并与当前正在悬停的项目对齐也很重要，如附带的屏幕截图所示。

有谁知道如何实现这一目标？

Here是我迄今为止在Codepen.io上取得的成果。我无法通过辅助菜单越过固定div的边界。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="layout">
<div id="menu">
<div class="rcade-menu">
  <ul>
        <li><a href="index.html" class="menu-item">ITEM 1</a></li>
        <li><a href="index.html" class="menu-item">ITEM 2</a></li>
        <li><a href="index.html" class="menu-item">ITEM 3</a>
    <ul>
        <li><a href="index.html">SUB 1</a></li>
    <li><a href="index.html">Sub 2</a></li>
   </ul>
  </li>
 </ul>
</div>
</div>
</div>
</body>
</html>

非常感谢你！

亚瑟

Answer 1

ul li ul {

position:absolute;
display:none;
right:0;
left:0;

}

您可以根据需要调整宽度和文字对齐

Answer 2

请尝试以下操作： Demo

CSS：

ul li ul {
    position:absolute;
    display:none;
    right:0;
    left:0;
}
ul li:hover ul {
    display:block;
}
ul li ul li {
    color:#fff;
    background:red;
    border-bottom:1px solid #fff;
    padding:4px 10px;

}
ul li ul li a {
    display:inline-block;
    color:#fff;
    text-decoration:none;   
}
ul li ul li:hover {     
    color:#fff;
    background:#b00620;

}

使二级菜单在垂直固定的DIV菜单的边界上飞出

2 个答案: