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 */

如您所见，“投资组合”实际上显示了子菜单，但此子菜单应垂直对齐。

Answer 1

您似乎删除了li

上的定位上下文

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

Answer 2

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

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

更新：说明

1）display:block;属性是HTML中的块属性。因此，具有此类属性的每个元素都会采用一个新行（元素视图垂直）。

2）display:inline-block;属性是一个块，但是内联属性。因此，这些属性出现在同一行上的元素（元素水平视图）。

Working : Fiddle

Answer 3

在您的CSS中，您使用oAttach.PropertyAccessor.SetProperty ("http://schemas.microsoft.com/mapi/proptag/0x3712001F")选择器内嵌所有主菜单项，这也适用于子菜单中的#menu li。

因此，您必须为子菜单li s

明确指定display: block

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

li

Answer 4

对于li，你已经将显示设置为内联块，这就是为什么它们会出现在一行中。所以对于组合子菜单在你的css文件中写这个css

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

子菜单垂直对齐

4 个答案: