html css mega menu drop down -
http://www.brokenarrowwear.com/responsivedesign/index.html
i'm redesigning website , i'm having problem product catalogue drop down menu. i'm using foundation 5 responsiveness, , i'm not sure may what's messing menu.
the code i'm inserting doesn't work on thing on here (i'm assuming because can't foundation , pictures load in) link has looks like.
i've tried lot of different methods work editing css. thought margin thing when right click inspector view shows anchor tag didn't code anchor tag made me confused.
can me? ps menu product catalog drop down supposed 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 ul of padding , list styling*/ .menu ul { list-style-type:none; padding:0; position: absolute; } /*style menu links*/ .menu li { display:block; text-align: center; text-decoration: none; color: transparent; } /*hover state top level links*/ .menu li:hover { background: white; color: #5fd6d6; font-weight: bold; } .menu li:hover { box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08); } /*style dropdown links*/ .menu li:hover ul { background: white; color: #161616; height: 40px; line-height: 40px; } /*hover state dropdown links*/ .menu li:hover ul a:hover { color: #161616; } /*hide dropdown links until 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 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 */ /* on 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 on 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 used , traditional method t-shirt printing. 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 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 , reflective name few! make 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 on 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 on printing</p> <p>the used , traditional method t-shirt printing. 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 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 used , traditional method t-shirt printing. 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 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 used , traditional method t-shirt printing. 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 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 used , traditional method t-shirt printing. 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 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 , reflective name few! make 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 -->
Comments
Post a Comment