menu - How to make vertical menu with emenu extension in Yii?

Question

Using the emenu Yii extension for a menu. The underlying project for this extension is http://lwis.net/free-css-drop-down-menu/ .

Right now the sub menus display in a row (which does eventually wrap to a 2nd row). I'm using the "nvidia" theme.

How do I make submenus vertical? I want the items in the sub menu to stack vertically on top of one another.

Answer 1

This is a css issue. The inner <ul> should have the style: width : 100% which comes from dropdown.css, but it is being overridden by themes/nvidia.com/default.css where it is specified as: width: 170px. So you can change that value back to 100% by adding it in your own custom css file.

dropdown.css:

ul.dropdown ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}

themes/nvidia.com/default.css:

ul.dropdown ul {
  width: 170px;
  background-color: #333;
  color: #fff;
  font-size: 11px;
  text-transform: none;
  filter: alpha(opacity=90);
  -moz-opacity: .9;
  KhtmlOpacity: .9;
  opacity: .9;
}

mystyle.css:

ul.dropdown ul{
  width:100% !important;
}