导航栏中的下拉菜单未对齐

时间:2016-12-11 21:43:14

标签: html css

我在导航栏中调整下拉菜单时遇到问题,我已尝试过每个建议。我尝试了function enqueue_my_scripts() { wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for Bootstrap js to function wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap JavaScript goodness } add_action('wp_enqueue_scripts', 'enqueue_my_scripts'); function enqueue_my_styles() { wp_enqueue_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' ); wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', 'enqueue_my_styles'); .nav { display: flex; padding: 24px } left以及其他所有内容。我认为这可能是一种干扰。下拉菜单中的所有内容都从父菜单项的中心对齐。

https://jsfiddle.net/ethacker/j7tgq95j/3/

我的HTML代码:

float: left

我的css代码:

right

2 个答案:

答案 0 :(得分:0)

您没有指定要将下拉元素对齐的位置。是否要将所有对齐,居中或左对齐。我假设离开,所以尝试添加下面的代码。您可能还需要调整左属性的值和悬停背景样式。

.sub-menu a {

position: absolute;
left: 3%;

}

如果这有帮助,请告诉我。保持温暖!

答案 1 :(得分:0)

这会将子菜单对齐到左侧:

.navMenu .parentMenu .sub-menu {
  display: none;
  position:absolute;
  list-style-type: none;
  padding:0;
  margin: 0;
  left:-1px;
  top:27px;
}

.navMenu .parentMenu:hover .sub-menu {
  display: block;  
}

https://jsfiddle.net/am13qur4/