个人中心
gpt4 book ai didi

javascript - 悬停时纯 css 弹出子菜单

转载 作者：太空宇宙 更新时间：2023-11-03 18:22:42 25 4
gpt4 key购买 nike

正在设置站点，但在设置菜单时遇到了一些麻烦。我想对其进行设置，以便当有人将鼠标悬停在侧面菜单上的一个按钮上时，会弹出一个子菜单。我是 css 的 super 新手，而且肯定是纯粹的，所以任何帮助都将不胜感激。

这是到目前为止的 html。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
<link rel="stylesheet" href="side-menu.css" />
<style type="text/css"></style>
</head>

<body bgcolor="#454545">
<div id="page" align="center">
  <div id="layout"> <a href="#menu" id="menulink" class="menu-link"> </a>
    <div id="menu">
      <div class="pure-menu pure-menu-open"> <a class="pure-menu-heading" href="#">Codetractors</a>
        <ul>
          <li class="menu-item-divided pure-menu-selected"> <a href="index.html"><strong>Home</strong></a> </li>
          <li><a href="#"><strong>About</strong></a></li>
          <li><a href="#"><strong>Post Job</strong></a></li>
          <li> <a href="#"><strong>Browse Jobs</strong></a></li>
          <li><a href="#"><strong>Contact</strong></a></li>
          <li><a href="memlogin.html"><strong>Login</strong></a></li>
        </ul>
      </div>
    </div>
    <div id="main">
      <div class="header">
        <h1>Page Title</h1>
        <h2>A subtitle for your page goes here</h2>
      </div>
      <div class="content">
        <h2 class="content-subhead">How to use this layout</h2>
      </div>
    </div>
  </div>
  <script src="ui.js"></script> 
</div>
</body>
</html>

我知道您需要有一个子菜单，但根据我的尝试，所有内容都会破坏当前菜单。感谢您的帮助!

这是一个 jsfiddle。我试图在“岗位工作”下弹出 http://jsfiddle.net/aaB6u/1/

最佳答案

如果您只想创建一个仅使用 CSS 的悬停菜单，那么您拥有的代码比您需要的要多得多。

看看这个 fiddle

http://jsfiddle.net/jG9sF/1/

您需要更改布局，使父菜单处于绝对定位状态，然后将相对位置置于子菜单上。 

ul {
    display:none;
}

#manage_menu:hover > ul, li:hover > ul {
   display: block;
}

关于javascript - 悬停时纯 css 弹出子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21505730/

25 4 0
文章推荐： css - Sass 混合递归； @include 循环
文章推荐： c# - 重写正则表达式以删除 c#6 依赖项
文章推荐： javascript - 如果在js.erb中确认
文章推荐： c# - Linq to Entities - where 语句抛出 System.NotSupported 异常