悬停时纯CSS弹出子菜单

Question

working on setting up a site, and having a bit of trouble setting up the menu. 正在设置网站，并且在设置菜单时遇到了一些麻烦。 I would like to set it up so that when someone hovers over one of the buttons on the side menu a sub-menu pops out. 我想进行设置，以便当有人将鼠标悬停在侧面菜单上的一个按钮上时，会弹出一个子菜单。 Im super new to css and pure for sure, so any help is appreciated. 我绝对不是CSS的新手，而且绝对是纯正的，因此对您的帮助表示赞赏。

This is the html thus far. 到目前为止，这是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>

i know that you need to have a for the sub-menu but from what I have tried everything kept breaking the current menu. 我知道您需要一个子菜单，但是根据我的尝试，一切都一直在中断当前菜单。 Thanks for any help! 谢谢你的帮助！

here is a jsfiddle. 这是一个jsfiddle。 im trying to get the pop out under "post jobs" http://jsfiddle.net/aaB6u/1/ 即时通讯试图弹出弹出“职位” http://jsfiddle.net/aaB6u/1/

Answer 1

You have way more code in there than you need if all you want to do is create a CSS only hover menu. 如果只想创建一个CSS悬停菜单，那么那里的代码就会比需要的更多。

Check out this fiddle 看看这个小提琴

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

You'll want to change the layout so the parent menu is absolutely positioned, and then you put a relative position on the children. 您需要更改布局，以使父菜单处于绝对位置，然后在子菜单上放置一个相对位置。

ul {
    display:none;
}

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

悬停时纯CSS弹出子菜单

问题描述

1 个解决方案

解决方案1
0 2014-02-02 01:55:50

悬停时纯CSS弹出子菜单

问题描述

1 个解决方案

解决方案1 0 2014-02-02 01:55:50

解决方案1
0 2014-02-02 01:55:50