html css mega menu下拉菜单

时间：2015-06-10 15:40:18

标签： html css menu zurb-foundation-5

http://www.brokenarrowwear.com/responsivedesign/index.html

我正在重新设计此网站，并且我在产品目录下拉菜单中遇到问题。我使用foundation 5来表示响应能力，我不确定，但这可能会让我的菜单变得混乱。

我插入的代码不会在这里工作（我假设因为我无法获得基础和图片加载）但链接有什么呢好像。

我尝试了很多不同的方法，只需编辑CSS就可以实现这一点。我认为这是一个边缘的事情，但当我右键单击检查器视图时，它显示一个锚标记，我没有编写锚标记，这让我真的很困惑。

任何人都可以帮助我吗？ ps菜单产品目录下拉列表应该是这样的。 product catalog drop down

＆＃13;
＆＃13; 
/* 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 */
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题