Question

致力于设置网站，并在设置菜单时遇到一些麻烦。我想设置它，以便当有人盘旋在侧面菜单上的一个按钮上时会弹出一个子菜单。我对css非常陌生并且肯定是纯粹的，所以任何帮助都会受到赞赏。

这是迄今为止的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/

Answer 1

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

看看这个小提琴

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

您需要更改布局，以便父菜单绝对定位，然后在子项上放置相对位置。

ul {
    display:none;
}

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

hss上的纯css弹出子菜单

1 个答案: