http://www.brokenarrowwear.com/responsivedesign/index.html
I'm redesigning this website and I'm having a problem with the product catalogue drop down menu. I'm using foundation 5 for responsiveness, and I'm not sure but it may be what's messing up my menu.
The code I'm inserting doesn't work on the thing on here (I'm assuming because I can't get foundation and pictures to load in) but the link has what it looks like.
I've tried a lot of different methods to get this to work with just editing the CSS. I thought it was a margin thing but when I right click for inspector view it shows an anchor tag where I didn't code an anchor tag which made me really confused.
Can anyone help me? ps the menu product catalog drop down is supposed to look like this.
/* MENU */
.button-group {
width: 104%;
letter-spacing: .014em;
}
.button-group .button {
font-family: "PT Sans", sans-serif;
font-weight: bold;
color: black;
background: #5fd6d6; /* Old browsers */
background: -moz-linear-gradient(top, #5fd6d6 0%, #b9e8e8 42%, #b9e8e8 57%, #5fd6d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5fd6d6), color-stop(42%,#b9e8e8), color-stop(57%,#b9e8e8), color-stop(100%,#5fd6d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5fd6d6 0%,#b9e8e8 42%,#b9e8e8 57%,#5fd6d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5fd6d6 0%,#b9e8e8 42%,#b9e8e8 57%,#5fd6d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5fd6d6 0%,#b9e8e8 42%,#b9e8e8 57%,#5fd6d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #5fd6d6 0%,#b9e8e8 42%,#b9e8e8 57%,#5fd6d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fd6d6', endColorstr='#5fd6d6',GradientType=0 ); /* IE6-9 */
}
.buttonleft {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.buttonright {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.button-group .button:hover {
background: white;
color: #5fd6d6;
font-weight: bold;
box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
}
/*Strip the ul of padding and list styling*/
.menu ul {
list-style-type:none;
padding:0;
position: absolute;
}
/*Style for menu links*/
.menu li a {
display:block;
text-align: center;
text-decoration: none;
color: transparent;
}
/*Hover state for top level links*/
.menu li:hover a {
background: white;
color: #5fd6d6;
font-weight: bold;
}
.menu li:hover {
box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
}
/*Style for dropdown links*/
.menu li:hover ul a {
background: white;
color: #161616;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.menu li:hover ul a:hover {
color: #161616;
}
/*Hide dropdown links until they are needed*/
.menu li ul {
display: none;
z-index: 100;
}
/*Make dropdown links vertical*/
.menu li ul li {
display: block;
float: none;
box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
}
.hidden li {
width: 96%;
height: 461px;
background-color: white;
}
.hidden li img {
margin-top: -55px;
}
.hidden
{
left:0px;
margin-top: -20px;
margin-left: -2px;
}
/*Display the dropdown on hover*/
.menu ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.dropdownhr {
padding-bottom: 30px;
}
.minipics {
height: 34px;
}
/* tshirt printing drop down option */
.tshirtdropdown:hover {
background-color: grey;
}
.tshirtdropdown {
height: 378px;
padding-top: 75px;
margin-top: -66px;
}
.tshirtdropdown img {
width: 100%;
}
.ddheader {
font-size: 1.5em;
font-weight: bold;
margin-bottom: -2px;
}
.tshirtbtext {
color: #cc0b12;
font-weight: bold;
margin-top: -55px;
}
/* /tshirt printing drop down option */
/* all over printing drop down option */
.alloverdropdown:hover {
background-color: pink;
}
.alloverdropdown {
height: 373px;
padding-top: 74px;
margin-top: -61px;
}
.alloverdropdown img {
width: 100%;
height: 253px;
}
/* /all over printing drop down option */
/* embroidery drop down option */
.embroiderydropdown:hover {
background-color: lightblue;
}
.embroiderydropdown {
height: 373px;
padding-top: 74px;
margin-top: -61px;
}
.embroiderydropdown img {
width: 100%;
height: 253px;
}
/* /embroidery drop down option */
/* rhinestone drop down option */
.rhinestonedropdown:hover {
background-color: #B19CD9;
}
.rhinestonedropdown {
height: 373px;
padding-top: 74px;
margin-top: -61px;
}
.rhinestonedropdown img {
width: 100%;
height: 253px;
}
/* /rhinestone drop down option */
/* product catalog drop down option */
.topproducts:hover {
background-color: lightgreen;
}
.productitem:hover {
background-color: lightgreen;
}
.productcatalog {
width: 1073px;
}
.topproducts {
height: 413px;
width: 390px;
float: right;
border-left: solid 1px #DDD;
}
.topproducts img {
width: 350px;
height: 450px;
display: block;
margin: 0 auto;
}
.productgroup {
width: 560px;
height: 413px;
margin-right: -55px;
float: left;
}
.productitem {
width: 161px;
float: left;
margin-right: 25px;
margin-top: 0px;
}
.productitem p {
text-align: center;
font-weight: bold;
color: black;
margin-bottom: 5px;
}
/* /product catalog drop down option */
/* /MENU */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- menu -->
<div class="row hide-for-small hidden-for-medium-only">
<div class="large-12 columns">
<div class="menu">
<ul class="button-group">
<li><a href="#" class="button buttonleft">T-Shirt Printing</a>
<ul class="hidden">
<li><a href="#">
<div class="large-12 columns">
<div class="large-4 columns tshirtdropdown"><a href="#">
<img src="img/dropdownfiller.jpg" style="margin-top: -95px;"/><br />
<p class="ddheader">Screen Printing</p>
<p>The most used and traditional method for t-shirt printing. Almost always the most cost efficient!</p>
</a></div>
<div class="large-4 columns tshirtdropdown"><a href="#">
<img src="img/dropdownfiller.jpg" /><br />
<p class="ddheader">Digital Printing (DTG)</p>
<p>Create high detailed/photographic images with DTG printing.<br />No Mimimums!</p>
</a></div>
<div class="large-4 columns tshirtdropdown"><a href="#">
<img src="img/dropdownfiller.jpg" /><br />
<p class="ddheader">Special Effect Printing</p>
<p>Glitter, foils, shimmers and reflective just to name a few! Make your design stand out.</p>
</a></div>
<hr class="dropdownhr"/>
<img src="img/noartfee.jpg" class="minipics" />
<img src="img/turnaround.jpg" class="minipics" />
<img src="img/shipping.jpg" class="minipics" />
</div>
</a></li>
</ul>
</li>
<li><a href="#" class="button">All Over Printing</a>
<ul class="hidden">
<li><a href="#">
<div class="large-12 columns">
<div class="large-6 columns alloverdropdown"><a href="#">
<img src="img/dropdownfiller.jpg" style="margin-top: -95px;"/><br />
<p class="ddheader">All Over Printing</p>
<p>The most used and traditional method for t-shirt printing. Almost always the most cost efficient!</p>
</a></div>
<div class="large-6 columns alloverdropdown"><a href="#">
<img src="img/dropdownfiller.jpg" /><br />
<p class="ddheader">Design Samples</p>
<p>Create high detailed/photographic images with DTG printing.<br />No Mimimums!</p>
</a></div>
<hr class="dropdownhr"/>
<img src="img/noartfee.jpg" class="minipics" />
<img src="img/turnaround.jpg" class="minipics" />
<img src="img/shipping.jpg" class="minipics" />
</div>
</a></li>
</ul>
</li>
<li><a href="#" class="button">Embroidery</a>
<ul class="hidden">
<li><a href="#">
<div class="large-12 columns">
<div class="large-6 columns embroiderydropdown"><a href="#">
<img src="img/dropdownfiller.jpg" style="margin-top: -95px;"/><br />
<p class="ddheader">Special Effects</p>
<p>The most used and traditional method for t-shirt printing. Almost always the most cost efficient!</p>
</a></div>
<div class="large-6 columns embroiderydropdown"><a href="#">
<img src="img/dropdownfiller.jpg" /><br />
<p class="ddheader">Design Samples</p>
<p>Create high detailed/photographic images with DTG printing.<br />No Mimimums!</p>
</a></div>
<hr class="dropdownhr"/>
<img src="img/noartfee.jpg" class="minipics" />
<img src="img/turnaround.jpg" class="minipics" />
<img src="img/shipping.jpg" class="minipics" />
</div>
</a></li>
</ul>
</li>
<li><a href="#" class="button">Rhinestones</a>
<ul class="hidden">
<li><a href="#">
<div class="large-12 columns">
<div class="large-6 columns rhinestonedropdown"><a href="#">
<img src="img/dropdownfiller.jpg" style="margin-top: -95px;"/><br />
<p class="ddheader">Featured Products</p>
<p>The most used and traditional method for t-shirt printing. Almost always the most cost efficient!</p>
</a></div>
<div class="large-6 columns rhinestonedropdown"><a href="#">
<img src="img/dropdownfiller.jpg" /><br />
<p class="ddheader">Design Samples</p>
<p>Create high detailed/photographic images with DTG printing.<br />No Mimimums!</p>
</a></div>
<hr class="dropdownhr"/>
<img src="img/noartfee.jpg" class="minipics" />
<img src="img/turnaround.jpg" class="minipics" />
<img src="img/shipping.jpg" class="minipics" />
</div>
</a></li>
</ul>
</li>
<li><a href="#" class="button">Product Catalog</a>
<ul class="hidden">
<li><a href="#">
<div class="large-12 columns">
<div class="productgroup">
<div class="productitem"><a href="#">
<img src="img/productexampledropdown.png" /><br />
<p>T-Shirts</p>
</a></div>
<div class="productitem"><a href="#">
<img src="img/productexampledropdown.png" /><br />
<p>Polos</p>
</a></div>
<div class="productitem"><a href="#">
<img src="img/productexampledropdown.png" /><br />
<p>Hats</p>
</a></div>
<br />
<div class="productitem"><a href="#">
<img src="img/productexampledropdown.png" /><br />
<p>Sweatshirts</p>
</a></div>
<div class="productitem"><a href="#">
<img src="img/productexampledropdown.png" /><br />
<p>Ladies</p>
</a></div>
</div><!-- /productgroup -->
<div class="topproducts"><a href="#">
<img src="img/topproductsdropdown.jpg" />
</a></div>
<hr class="dropdownhr"/>
<img src="img/noartfee.jpg" class="minipics" />
<img src="img/turnaround.jpg" class="minipics" />
<img src="img/shipping.jpg" class="minipics" />
</div>
</a></li>
</ul>
</li>
<li>
<a href="#" class="button buttonright">Additional Services</a>
<ul class="hidden">
<li><a href="#">
<div class="large-12 columns">
<div class="large-4 columns tshirtdropdown"><a href="#">
<img src="img/dropdownfiller.jpg" style="margin-top: -95px;"/><br />
<p class="ddheader">Screen Printing</p>
<p>The most used and traditional method for t-shirt printing. Almost always the most cost efficient!</p>
</a></div>
<div class="large-4 columns tshirtdropdown"><a href="#">
<img src="img/dropdownfiller.jpg" /><br />
<p class="ddheader">Digital Printing (DTG)</p>
<p>Create high detailed/photographic images with DTG printing.<br />No Mimimums!</p>
</a></div>
<div class="large-4 columns tshirtdropdown"><a href="#">
<img src="img/dropdownfiller.jpg" /><br />
<p class="ddheader">Special Effect Printing</p>
<p>Glitter, foils, shimmers and reflective just to name a few! Make your design stand out.</p>
</a></div>
<hr class="dropdownhr"/>
<img src="img/noartfee.jpg" class="minipics" />
<img src="img/turnaround.jpg" class="minipics" />
<img src="img/shipping.jpg" class="minipics" />
</div>
</a></li>
</ul>
</li>
</ul>
</div><!-- /menu -->
</div>
</div>
<!-- /menu -->