I am using magento 1 and I am trying to set up my menu to have sub menus that are in columns, not one long list. This is what css code I'm currently using is
.jewelry {
float: left;
width: 33.33%;
padding: 100px;
}
/* Clear floats after the columns */
.row:after {
display: table;
clear: both;
}
which is in : httpdocs / skin / frontend / theme / default / css / homeDesign.css and then I updated my layout.xml with
<action method="addItem"><type>skin_css</type><file>css/homeDesign.css</file></action>
and my html code in my block for the menu is:
<li class="dropdown"><a href="">Label</a>
<ul class="dropdown-menu row">
<div class="jewelry">
<li><a href="">thing</a></li>
...
</div>
<div class="jewelry">
<li><a href="">thing</a></li>
...
</div>
<div class="jewlery">
<li><a href="">thing</a></li>
...
</div>
</ul>
</li>
But, when I update my site with this I get a jumbled mess. All the columns stack on top of each other. What should I do to fix this?
