Question

如果这是一个简单的错误，我会提前道歉。

我正在尝试使用悬停效果更新css菜单的代码，当我将鼠标悬停在父li上时，会出现子菜单ul。当我试图盘旋到子菜单时，它消失了;根据我的理解，父李和子菜单之间存在瞎扯。

菜单的代码如下：

// Import required modules.
var express = require('express');
var stormpath = require('express-stormpath');
var path = require('path');
var engine = require('ejs-mate');
var app = express();

// use ejs-locals for all ejs templates: 
  app.engine('ejs', engine);

// Configure public views
  app.set('views','./views');

app.use(stormpath.init(app, {
  apiKeyFile: process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'] + ~removed
  secretKey: '~removed',
  application: '~removed',
  enableRegistration: true,
  enableGivenName: false,
  requireGivenName: false,
  enableSurname: false,
  requireSurname: false,
  website: true,
  api: true,
  web: {
    register: {
      uri: '/signup',  // Use a different URL
      nextUri: 'http://google.com',    // Where to send the user to, if auto login is enabled
      fields: {
        passwordConfirm: {
          enabled: true,
          required: true
        }
      },
      fieldOrder: [ "email", "username", "password", "passwordConfirm" ],

    }
  },
  enableUsername: true,
  requireUsername: true,
  enableConfirmPassword: true,
  requireConfirmPassword: true

}
));

app.get('/', function(req, res) {
  res.render('home.ejs', {
    title: 'Welcome'
  });
});

app.get('/', function(req, res) {
  res.send('home page!');
});

app.listen(process.env.PORT || 3000);

提前致谢

Answer 1

我建议问题在于：

.main-navigation ul li:hover ul{
    right: 50%;
    margin-right: -150%;
    width:180px;
    position: absolute;
}

更常见的是它看起来像这样：

.main-navigation ul li:hover ul{
    left: 100%; /* start at the right edge of the parent li */
    top:0% /*always align to the top of the parent li */
    width:180px;
    position: absolute;
}

父母li也应该有position:relative。

CSS - 子菜单在悬停时消失

1 个答案: