- 34
hello
I used the FREE plugin - Nop Categories Header Menu.. is very good.
I was able to put the subcategory side by side ..
but when you open the submenu would that be always the same SIZES and aligned in the same spot.
How this site http://dewalt.com/Home.aspx
how can I do???
this is the my CSS
.categoriesHeaderMenu {
position: relative;
z-index: 1000;
height: 50px;
clear: both;
background-color: #606164;
margin-bottom: 5px;
}
.sf-menu {
height: 50px;
margin: 0;
padding: 10px 0 0 0;
}
.categoriesHeaderMenu .sf-menu .home {
background: transparent url("images/home.jpg") no-repeat scroll 0 0;
}
.sf-menu *
{
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu > li
{
position: relative;
float: left;
}
.sf-menu > li:hover {
background-color: #323132;
}
.sf-menu > li > a {
border: thin inset #C0C0C0;
display: inline-block;
padding: 0 15px;
font-size: 12px;
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
line-height: 30px;
margin-right: 10px;
margin-left: 10px;
background-color: #323132;
}
.sf-menu li:hover a {
color: #fff;
}
.sf-menu ul {
clear:none;
display: none;
position: absolute;
width: 900px; /*float:left;*/ /*top: 30px;*/
z-index: 100;
padding-bottom: 1px;
box-shadow: 0 0.5em 4em #000;
}
.sf-menu ul li {
position: relative;
border-right: 1px solid #323132;
width: 180px;
height:40px;
float: left;
/*display:inline;*/
background-color: #323132;
background: rgba(97, 98, 100, 0.90);
vertical-align: middle;
line-height:30px;
border-bottom: 1px solid #323132;
}
.sf-menu ul a {
display: block;
padding: 5px 15px;
font-size: 11px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
.sf-menu ul a:hover
{
background-color: #323132;
}
.sf-menu ul ul
{
top: 0;
left: 180px;
}
.sf-menu li:hover > ul
{
display: block;
}
