子菜单垂直对齐

Question

我有一个应该垂直显示子菜单的简单菜单。但是，我将此菜单更改为使其居中，现在它不是垂直显示而是水平显示。

这是我的代码笔：

    .navitem{
height: 30px;
}

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {

 background-color:black;
 display: inline-block;
 padding: 0;
 vertical-align: middle;
 }
#menu li a {
 display:block;
 width:125px;
 color:white;
 text-decoration:none;
 line-height:30px

 }
#menu li a:hover {
 color:#FFD700;
 }

#menu ul li ul {
 display:none;
 }

 #menu ul li:hover ul {
 display:block;
 }

#menu li:hover ul li {
 float:none;


 }

#menu li ul {
 position:absolute;
 } 

#menu {
 height:30px;
 margin-top: 30px;

 } 

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}
/* Logo */ 
#logo{
 height: 190px;
 width: 266px;
  background-color:black;
  margin: 0 30px;
}
/* Fin MENU */

如您所见，"portfolio" 实际上显示了子菜单，但该子菜单应垂直对齐。

Answer 1

只需将 display:block 添加到您的子菜单 li。

#menu li:hover ul li {
 float:none;
 display:block; /* Add This */
 }

更新：解释

1) display:block; 属性是 HTML 中的块属性。因此，每个带有属性的元素都需要换行（垂直元素视图）。

2) display:inline-block; 属性是一个块但是 inline 属性。所以这样的元素属性出现在同一行（元素水平视图）。

Working : Fiddle

Answer 2

您似乎删除了 li

上的定位上下文

#menu li {
  background-color: black;
  display: inline-block;
  padding: 0;
  vertical-align: middle;
  position: relative; /* add this */
}

Answer 3

在您的 css 中，您使用 #menu li 选择器使所有主菜单项内联，这也适用于子菜单中的 li。

因此您必须明确指定 display: block 子菜单 lis

按如下所示更改您的代码。

#menu li:hover ul li {
   float:none;
   display:block;
 }

Answer 4

对于 li，您将显示设置为行内块，这就是为什么它们排成一行。所以对于投资组合子菜单，将此 css 写入您的 css 文件

#menu ul li ul li {
  display: block;
}

子菜单垂直对齐

Sub-menu vertically align

html

css

alignment