I would like to add some columns under my products link. For example,
Title Title Title Title
Vendor Vendor
Vendor Vendor
Vendor Vendor
Please let me know if someone could help me on this.
Thanks
Joe
Title Title Title Title
Vendor Vendor
Vendor Vendor
Vendor Vendor
Please let me know if someone could help me on this.
Thanks
Joe
HTML:
<section id="navigation">
<nav>
<ul id="topnav" class="sf-menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul><!-- topnav -->
</nav><!-- nav -->
<div class="clear"></div>
</section>
<div class="clear"></div>
</header>
</div>
Code:
#navigation {
float:none;
clear:both;
background:url(../images/bg-navigation.png) repeat;
}
nav{
position:relative;
z-index:9000;
float:none;
margin:0 0 0 0;
}
#topnav{
margin:0;
padding:0;
list-style-type:none;
overflow:visible;
position:relative;
float:left;
font-size:14px;
font-family:'DroidSansRegular', Arial;
}
.sf-menu a {
text-decoration:none!important;
display: block;
position: relative;
padding: 0 25px !important;
text-decoration:none;
font-weight:normal;
text-transform:uppercase;
color:#ededed;
text-shadow:1px 1px 0 #151515;
}
.sf-menu a:visited {
color:#ededed;
}
.sf-menu a:hover, .sf-menu li a.current {
color:#fff;
}
.sf-menu li.sfHover a:hover {
color:#ededed;
}
.sf-menu li a {
background:url(../images/bg-sepmenu.gif) repeat-y top right; line-height:42px;
}
.sf-menu li {
padding:0 0;
}
.sf-menu li:hover,
.sf-menu .current, .sf-menu .current:hover {
background:url(../images/bg-navcurrent.png) repeat;
}
/* Drop down menu */
.sf-menu ul a:hover {}
.sf-menu li li {
text-align:left;
line-height:20px;
margin:0;
}
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height:100%;
position:absolute;
right:0;
bottom:0;
float:left;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 14em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
margin:0;
}
.sf-menu li li{
margin:0px 0px;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0px;
top: 3.7em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 14em; /* match ul width */
top: -1px;
margin-left: 0px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 14em; /* match ul width */
top: -1px;
}
.sf-menu ul li a{
padding:14px 25px!important;
text-transform:capitalize;
line-height:normal;
display:block; width:auto; white-space:no-wrap;
}
.sf-menu ul li a:hover{}
.sf-menu li ul {
padding:0px;
}
.sf-menu a.sf-with-ul {
padding-right: 0px;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: 10px;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
}
.sf-menu li li a {
background:transparent; font-size:14px;
}
.sf-menu li li {
background:url(../images/submenu.png) repeat; border-bottom:solid 1px
}
.sf-menu li li:hover {
background:url(../images/submenu-hover.png) repeat;
}
Last edited by a moderator: