如何创建悬停在CSS下拉

Question

我创建了一个基于HTML和CSS的页面我得到了整个屏幕布局，但我不知道如何创建一个悬停下拉我正在尽我所能去伸出我的励志菜单。我的页面看起来不像我期待的那样。有人可以建议我一个明确的解决方案我只使用HTML5或CSS3。请看看看看，

* { 
    padding: 0; 
    margin: 0; 
} 

.screen_area { 
    font: 12px/1.5 Helvetica, Arial, sans-serif; 
    line-height: 1.3em; 
    padding: 0; 
    background: #fff; 
} 

.nav_bar, 
.section li:first-child, 
.nav>li>a, 
.content_head, 
.section li:first-child { 
    text-transform: uppercase; 
} 

.nav_bar, 
.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2 { 
    padding: 5px 0; 
} 

.nav_bar, 
.dropdown_menu { 
    width: 100%; 
} 

.nav_bar { 
    background-color: #333; 
    line-height: 20px; 
    letter-spacing: 0.6px; 
} 

.container_nav, 
.legal, 
.wrap { 
    margin: 0 auto; 
} 

.clearfix { 
    display: block; 
} 

.main_div, 
.sub_menu { 
    padding-top: 15px; 
} 

.main_div { 
    height: 60px; 
} 

.img { 
    width: 115px; 
    fill: #000; 
    background-color: transparent; 
    background: url(logo_img.png) no-repeat; 
} 

.list_nav, 
.img, 
.nav, 
.connect, 
.dropdown .nav>li>a, 
.nav>li>a, 
.nav_login2, 
.dropdown, 
.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2, 
.nav_user2 { 
    display: inline-block; 
} 

a, 
a:hover, 
.badges .year { 
    text-decoration: none; 
} 

a, 
a:active, 
a:hover { 
    outline: 0; 
} 

.nav { 
    line-height: 1px; 
} 

.list_nav, 
.nav_search2 { 
    vertical-align: top; 
} 

.shop-nav, 
.nav li a { 
    white-space: nowrap; 
} 

.dropdown .nav>li>a, 
.search_term, 
.dropdown_menu { 
    box-sizing: border-box; 
} 

.dropdown .nav>li>a, 
.dropdown { 
    border: 2px solid #FFF; 
} 

.dropdown .nav>li>a, 
.nav_bar { 
    font-weight: 400; 
} 

.dropdown .nav>li>a, 
.main_div, 
.nav>li>a { 
    vertical-align: middle; 
} 

.dropdown .nav>li>a { 
    padding: 10px; 
    margin: 0 1px; 
} 

.dropdown .nav>li>a, 
.search_term, 
.main_div, 
.nav>li>a { 
    color: #000; 
} 

.dropdown, 
.nav_user2, 
.nav_bar { 
    font-family: Oswald, Helvetica, Arial; 
} 

.dropdown, 
.drop:hover, 
.dropdown:hover { 
    border-bottom: none; 
} 

.dropdown { 
    background-color: #FFFFFF; 
    padding: 3px; 
    margin: 0 0; 
    line-height: 3px; 
    -webkit-backface-visibility: hidden; 
    -webkit-tap-highlight-color: transparent; 
    font-spacing: .06px; 
} 

.nav>li>a { 
    letter-spacing: 1px; 
} 

.dropdown, 
.dropdown_trigger, 
.dropdown_trigger2, 
.artist_overlay li, 
.btn_follow a, 
.nav_bar { 
    display: block; 
} 

.main_div, 
.nav>li>a { 
    font-size: 12.5px; 
    font-weight: 500; 
    padding: 10px 6px; 
} 

.search_term { 
    /* padding-right: 16px; */ 
    background-color: #F4F4F4; 
    width: 169px; 
    height: 33px; 
    padding-left: 10px; 
} 

input[type=text] { 
    border: 0; 
} 

.menu_search2 { 
    width: 211px; 
    padding-top: 2px; 
} 

.button_search { 
    color: #FFF; 
} 

.back { 
    background-image: url("big_search.png"); 
    -webkit-transition: background .3s; 
    transition: background .3s; 
} 

.menu_search2 button { 
    height: 33px; 
    width: 42px; 
    font-size: 16px; 
    border-radius: 0; 
} 

.search_border { 
    line-height: 1em; 
    cursor: pointer; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
} 

.button_search { 
    overflow: visible; 
    -webkit-appearance: button; 
} 

ul { 
    list-style-type: none; 
} 

.nav_icons, 
.nav_icons .nav>li { 
    margin-left: 0; 
} 

.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2, 
.screen_area { 
    margin: 0; 
} 

.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2 { 
    width: 34px; 
} 

.dropdown_trigger, 
.dropdown_trigger2 { 
    width: 14px; 
} 

.wish_list { 
    font-size: 23px; 
} 

.drop:hover { 
    z-index: 100002; 
    width: 31px; 
} 

.wish_list:hover { 
    color: #739FB1; 
} 

.dropdown_trigger2 { 
    background: url("cart.png") no-repeat; 
} 

.trig_drop, 
.login { 
    border: 2px solid transparent; 
} 

.trig_drop:hover, 
.dropdown:hover, 
.drop:hover { 
    border: 2px solid #333; 
} 

.dropdown:hover { 
    z-index: 100003; 
} 

.trig_drop:hover { 
    z-index: 100001; 
} 

.nav_user2, 
.badges .year { 
    font-weight: 700; 
} 

.nav_user2, 
.img { 
    height: 35px; 
} 

.nav_user2 { 
    border-right: 1px solid #BEBEBE; 
    padding-top: 7px; 
    font-spacing: .6px; 
    width: 164px; 
} 

.search_term, 
.dropdown, 
.nav>li>a, 
.nav_bar, 
.btn_follow a, 
.nav_login2 .nav>li>a { 
    font-size: 13px; 
} 

.nav.adus { 
    padding-left: 5px; 
    padding-bottom: 3px; 
} 

.nav_link { 
    margin-left: 10px; 
} 

.dropdown_menu, 
.wrap, 
.add { 
    text-align: left; 
} 

.dropdown_menu { 
    width: 225px; 
    padding: 15px; 
} 

.dropdown_menu { 
    position: absolute; 
    top: 50px; 
    right: 0; 
    background-color: #FFF; 
    z-index: 100000; 
    border: 2px solid #000; 
    padding: 20px; 
} 

.dropdown-menu, 
.button_search, 
.dropdown { 
    -webkit-transform: translateZ(0); 
} 

.dropdown-menu { 
    transform: translateZ(0); 
    display: none; 
} 

.wrap, 
.container_nav, 
.copyright, 
.legal, 
.cont { 
    width: 1022px; 
} 

.wrap, 
.footer, 
.legal { 
    clear: both; 
} 

.wrap { 
    padding: 5px 10px 0; 
    height: 1261px; 
} 

.content_header { 
    margin-bottom: 20px; 
} 

.content_header .label { 
    font: 700 25px/30px Helvetica, sans-serif; 
} 

.label a:hover { 
    color: #6EB1EC; 
} 

.col_small .menu div { 
    margin-bottom: 15px; 
} 

.photo { 
    border: 1px solid #eee; 
    padding: 2px; 
    width: 150px; 
    background: #fff; 
} 

.btn_follow { 
    margin: 10px 0; 
} 

.menu a:hover, 
.sub_menu a:hover { 
    color: #f06; 
} 

.add, 
.col_small { 
    width: 150px; 
} 

.add { 
    background-color: #bbb; 
    border-radius: 4px; 
    padding: 3px 2px 2px 9px; 
} 

input[type=button]:hover { 
    background-color: #AEE869 
} 

.sub_menu { 
    border-top: 1px dotted #ccc; 
} 

.sub_menu h4 a { 
    color: #888; 
} 

.sub_menu div { 
    margin-bottom: 15px; 
} 

.badges { 
    margin-bottom: 50px; 
} 

.badges .year, 
.btn_follow a, 
.nav_bar { 
    color: #fff; 
} 

.badges .year, 
.dropdown .nav>li>a { 
    line-height: 16px; 
} 

.badges .year { 
    border-radius: 50%; 
    background-color: #e9008d; 
    width: 14px; 
    height: 14px; 
    font-size: 11px; 
    padding: 0 2px 2px 1px; 
} 

.badges .year, 
.badges img { 
    margin-right: 5px; 
} 

.badges .year, 
.menu_search2 button, 
.nav_bar, 
.banner { 
    text-align: center; 
} 

.col_big, 
.content_head, 
.profile_list { 
    width: 840px; 
} 

.flip_container { 
    cursor: pointer; 
} 

.flipper, 
.artist_overlay li { 
    width: 270px; 
    height: 270px; 
} 

.flipper img.active { 
    visibility: visible; 
} 

.artist_overlay li, 
.shop-nav, 
.nav li a { 
    overflow: hidden; 
} 

.artist_overlay li { 
    margin: 0 10px 10px 0; 
} 

.content_head.inner { 
    margin-top: 30px; 
} 

.content_head { 
    height: auto; 
    padding-bottom: 19px; 
} 

.content_head { 
    margin-bottom: 8px; 
    border-bottom: 2px solid #333; 
    height: 31px; 
} 

.content_head h3 { 
    font: 700 24px/30px Helvetica, sans-serif; 
    text-transform: none; 
    float: none; 
} 

.content_head .subtitle { 
    margin-top: 2px; 
    font: 11px/13px Helvetica, sans-serif; 
    color: #4a4a4a; 
} 

.content_head .latest_menu { 
    bottom: 13px; 
    font: 12px/14px Helvetica, sans-serif; 
} 

.content_head .latest_menu a { 
    color: #2786c2; 
} 

.cards li { 
    margin-right: 9px; 
    float: left; 
} 

.fbcontainer, 
.card { 
    height: 20px; 
} 

.fbcontainer { 
    width: 21px; 
    margin-top: -4px; 
    border-radius: 32px; 
    background-image: url(cart.png); 
} 

.fbcontainer:hover { 
    background-image: url(red_cart.png); 
} 

.cont { 
    margin: 0px auto; 
    height: 191px; 
    border-top: 1px solid #ccc; 
    padding-top: 10px; 
} 

.connect { 
    margin-top: 12px; 
} 

.img_fb { 
    width: 68px; 
    height: 101px; 
} 

.section li:first-child { 
    color: #868684; 
} 

.banner { 
    margin-right: 60px; 
    width: 145px; 
    height: 145px; 
} 

.section { 
    margin-right: 49px; 
    border: none; 
    margin-top: 25px; 
    height: 168px; 
} 

.footer a { 
    color: #868684; 
} 

.section li a { 
    color: #666; 
} 

.section li { 
    margin-bottom: 3px; 
} 

.footer a:hover { 
    text-decoration: underline; 
} 

.copyright { 
    padding-top: 6px; 
    height: 40px; 
} 

.card { 
    text-indent: -9999px; 
    width: 183px; 
    background-image: url(cards.png); 
} 

.position { 
    position: relative; 
} 

a { 
    color: #000000; 
    cursor: pointer; 
} 

.card, 
.banner, 
.fbcontainer, 
.nav_icons, 
.connect, 
.content_head, 
.latest_menu, 
.menu_search2 button, 
.col_big, 
.content_head, 
.profile_list { 
    float: right; 
} 

.content_head, 
.content_header h1 a, 
.screen_area, 
.content_header { 
    color: #333px; 
} 

.copyright, 
.section, 
.artist_overlay li, 
.badges, 
.year, 
.col_small, 
.nav>li { 
    float: left; 
} 

.add, 
.search_border, 
.screen_area { 
    border: 0; 
} 

<body class="screen_area"> 
    <form name="big_screen" id="big_screen"> 
     <div class="nav_bar">20% Off + Free Worldwide Shipping on Everything Today!</div> 
     <header class="main_div position"> 
     <div class="container_nav position clearfix"> 
      <div class="list_nav"> 
       <ul class="nav position"> 
        <li class="dropdown position img"> 
        <a href="#" class="trig_dropdown nav2_link" style="border: none"></a> 
        </li> 
        <li class="dropdown position art"> 
        <a href="#" class="trig_dropdown nav2_link">Art</a> 
        </li> 
        <li class="dropdown position home"> 
        <a href="#" class="trig_dropdown nav2_link">Home</a> 
        </li> 
        <li class="dropdown position tech"> 
        <a href="#" class="trig_dropdown nav2_link">Tech</a> 
        </li> 
        <li class="dropdown position women"> 
        <a href="#" class="trig_dropdown nav2_link">Women</a> 
        </li> 
        <li class="dropdown position men"> 
        <a href="#" class="trig_dropdown nav2_link">Men</a> 
        </li> 
       </ul> 
      </div> 
      <div class="nav_search2 nav"> 
       <div class="menu_search2 position"> 
        <span> 
        <input type="text" name="search_text" id="search_text" class="search_term" placeholder="Search art & artists"/> 
        </span> 
        <span> 
        <button type="submit" name="search_button" id="search_button" class="button_search back search_border"></button> 
        </span> 
       </div> 
      </div> 
      <div class="nav_icons"> 
       <ul class="nav position"> 
        <li class="menu_wishlist dropdown position"> 
        <a href="#"><span class="wish_list">&#9733;</span></a> 
        </li> 
        <li class="menu_cart drop"> 
        <a href="#"><span class="fbcontainer"></span></a> 
        </li> 
       </ul> 
      </div> 
      <div class="nav_user2"> 
       <ul class="nav position adus"> 
        <li> 
        <a href="#" class="trig_drop nav2_link">Blog</a> 
        </li> 
        <li> 
        <a href="#" class="trig_drop nav_link">Discover</a> 
        </li> 
       </ul> 
      </div> 
      <div class="nav_login2"> 
       <ul class="nav"> 
        <li class="login dropdown position no_padding"> 
        <a class="trig_dropdown ">Join | Login</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
     </header> 
    </form> 
    <div class="wrap position"> 
     <div class="content clearfix"> 
     <div class="content_header"> 
      <div> 
       <h1 class="label"> 
        <a><span>Nick La</span></a> 
       </h1> 
      </div> 
     </div> 
     <div class="col_small"> 
      <div class="prof_image"> 
       <a href="#"> 
       <img src="nick_img.png" alt="nick_img.png" class="photo " /> 
       </a> 
      </div> 
      <div class="btn_follow"> 
       <input type="button" value="&plus; Follow" name="add_button" id="add_button" class="add" /> 
      </div> 
      <div class="menu"> 
       <div> 
        <h4> 
        <a href="#">Art Prints</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Framed Art Prints</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Canvas prints</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Metal Prints</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">iPhone & iPod Cases</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Stationery Cards</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">iPhone & iPod Skins</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Laptop & iPad Skins</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">V-neck T-shirts</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Long Sleeve T-shirts</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Tank Tops</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Biker Tanks</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Hoodies</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Throw Pillows</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Rectangular Pillows</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Carry-All Pouches</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Tote Bags</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Wall Clocks</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Mugs</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Rugs</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Laptop Sleeves</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Travel Mugs</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Metal Travel Mugs</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Comforters</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Bath Mats</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Floor Pillows</a> 
        </h4> 
       </div> 
      </div> 
      <div class="sub_menu"> 
       <div> 
        <h4> 
        <a href="#">Promoted (2)</a> 
        </h4> 
       </div> 
       <div> 
        <h4> 
        <a href="#">Followers (157)</a> 
        </h4> 
       </div> 
       <div> 
       </div> 
      </div> 
      <div class="badges"> 
       <div class="year">11</div> 
       <img src="badge.png" alt="badge.png"> 
      </div> 
     </div> 
     <div class="col_big artist_shop"> 
      <div class="list_profile"> 
       <ul class="clearfix artist_overlay"> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper"> 
          <a class="event"> 
          <img src="big_s1.png" alt="big_s1.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper"> 
          <a class="event"> 
          <img src="big_s2.png" alt="big_s2.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper"> 
          <a class="event"> 
          <img src="big_s3.png" alt="big_s3.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper"> 
          <a class="event"> 
          <img src="big_s4.png" alt="big_s4.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper"> 
          <a class="event"> 
          <img src="big_s5.png" alt="big_s5.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper"> 
          <a class="event"> 
          <img src="big_s6.png" alt="big_s6.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper"> 
          <a class="event"> 
          <img src="big_s7.png" alt="big_s7.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper position"> 
          <a class="event"> 
          <img src="big_s8.png" alt="big_s8.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
        <li> 
        <div class="flip_container"> 
         <div class="flipper position"> 
          <a class="event"> 
          <img src="big_s9.png" alt="big_s9.png"> 
          </a> 
         </div> 
        </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
     <div class="content_head position inner"> 
      <h3>Latest</h3> 
      <div class="subtitle">Uploaded By Nick La</div> 
      <ul class="latest_menu position"> 
       <li> 
        <a href="#">See More</a> 
       </li> 
      </ul> 
     </div> 
     <div class="profile_list"> 
      <ul class="cards clearfix"> 
       <li> 
        <div class="image_wrap"> 
        <a> 
        <img src="wrap_img1.png" alt="wrap_img1.png" /> 
        </a> 
        </div> 
       </li> 
       <li> 
        <div class="image_wrap"> 
        <a> 
        <img src="wrap_img2.png" alt="wrap_img2.png" /> 
        </a> 
        </div> 
       </li> 
       <li> 
        <div class="image_wrap"> 
        <a> 
        <img src="wrap_img3.png" alt="wrap_img3.png" /> 
        </a> 
        </div> 
       </li> 
       <li> 
        <div class="image_wrap"> 
        <a> 
        <img src="wrap_img4.png" alt="wrap_img4.png" /> 
        </a> 
        </div> 
       </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    <div class="footer"> 
     <div class="cont clearfix"> 
     <div class="connect"> 
      <div class="connect_one"> 
       <span><img src="connect.png" alt="connect.png"></span> 
      </div> 
      <a class="img_fb"><img src="facebook.png" alt="facebook.png"></a> 
      <a class="img_fb"><img src="twitter.png" alt="twitter.png"></a> 
      <a class="img_fb"><img src="instagram.png" alt="instagram.png"></a> 
      <a class="img_pin"><img src="pinterest.png" alt="pinterest.png"></a> 
     </div> 
     <div class="banner"> 
      <a class="join"><img src="join_us.png" alt="join_us.png" /></a> 
     </div> 
     <div class="heigh"></div> 
     <div class="multi_col"> 
      <ul class="section"> 
       <li>Help</li> 
       <li><a>Track My Order</a></li> 
       <li><a>Return My Order</a></li> 
       <li><a>Contact & FAQs</a></li> 
       <li><a>Selling</a></li> 
       <li><a>About Us</a></li> 
       <li><a>Curator Program</a></li> 
       <li><a>Wholesale Program</a></li> 
      </ul> 
      <ul class="section"> 
       <li>Shop</li> 
       <li><a>Art Prints</a> <a> & </a> <a>Framed Art Prints</a></li> 
       <li><a>Stretched Canvases</a></li> 
       <li><a>iPhone Cases</a></li> 
       <li><a>Laptop Skins & iPhone Skins</a></li> 
       <li><a>T-shirts & Hoodies</a></li> 
       <li><a>Gift Cards</a></li> 
      </ul> 
      <ul class="section"> 
       <li>News & Promos</li> 
       <li><a>Blog</a></li> 
       <li><a>Collabs</a></li> 
       <li><a>Newsletter</a></li> 
       <li><a>Refer a Friend</a></li> 
      </ul> 
     </div> 
     </div> 
     <div class="legal clearfix"> 
     <div class="copyright"> 
      &copy; 2017 Society6, LLC. LG Commerce. Some rights reserved. 
      <a href="#">Privacy Policy</a> | 
      <a href="#">Term of Service</a> 
      <div class="card"> 
       Visa, Mastercard, PayPal, American Express, Discover 
      </div> 
     </div> 
     </div> 
    </div> 
</body> 

Answer 1

使用此代码

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.screen_area { 
 
    font: 12px/1.5 Helvetica, Arial, sans-serif; 
 
    line-height: 1.3em; 
 
    padding: 0; 
 
    background: #fff; 
 
} 
 

 
.nav_bar, 
 
.section li:first-child, 
 
.nav>li>a, 
 
.content_head, 
 
.section li:first-child { 
 
    text-transform: uppercase; 
 
} 
 

 
.nav_bar, 
 
.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2 { 
 
    padding: 5px 0; 
 
} 
 

 
.nav_bar, 
 
.dropdown_menu { 
 
    width: 100%; 
 
} 
 

 
.nav_bar { 
 
    background-color: #333; 
 
    line-height: 20px; 
 
    letter-spacing: 0.6px; 
 
} 
 

 
.container_nav, 
 
.legal, 
 
.wrap { 
 
    margin: 0 auto; 
 
} 
 

 
.clearfix { 
 
    display: block; 
 
} 
 

 
.main_div, 
 
.sub_menu { 
 
    padding-top: 15px; 
 
} 
 

 
.main_div { 
 
    height: 60px; 
 
} 
 

 
.img { 
 
    width: 115px; 
 
    fill: #000; 
 
    background-color: transparent; 
 
    background: url(logo_img.png) no-repeat; 
 
} 
 

 
.list_nav, 
 
.img, 
 
.nav, 
 
.connect, 
 
.dropdown .nav>li>a, 
 
.nav>li>a, 
 
.nav_login2, 
 
.dropdown, 
 
.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2, 
 
.nav_user2 { 
 
    display: inline-block; 
 
} 
 

 
a, 
 
a:hover, 
 
.badges .year { 
 
    text-decoration: none; 
 
} 
 

 
a, 
 
a:active, 
 
a:hover { 
 
    outline: 0; 
 
} 
 

 
.nav { 
 
    line-height: 1px; 
 
} 
 

 
.list_nav, 
 
.nav_search2 { 
 
    vertical-align: top; 
 
} 
 

 
.shop-nav, 
 
.nav li a { 
 
    white-space: nowrap; 
 
} 
 

 
.dropdown .nav>li>a, 
 
.search_term, 
 
.dropdown_menu { 
 
    box-sizing: border-box; 
 
} 
 

 
.dropdown .nav>li>a, 
 
.dropdown { 
 
    border: 2px solid #FFF; 
 
} 
 

 
.dropdown .nav>li>a, 
 
.nav_bar { 
 
    font-weight: 400; 
 
} 
 

 
.dropdown .nav>li>a, 
 
.main_div, 
 
.nav>li>a { 
 
    vertical-align: middle; 
 
} 
 

 
.dropdown .nav>li>a { 
 
    padding: 10px; 
 
    margin: 0 1px; 
 
} 
 

 
.dropdown .nav>li>a, 
 
.search_term, 
 
.main_div, 
 
.nav>li>a { 
 
    color: #000; 
 
} 
 

 
.dropdown, 
 
.nav_user2, 
 
.nav_bar { 
 
    font-family: Oswald, Helvetica, Arial; 
 
} 
 

 
.dropdown, 
 
.drop:hover, 
 
.dropdown:hover { 
 
    border-bottom: none; 
 
} 
 

 
.dropdown { 
 
    background-color: #FFFFFF; 
 
    padding: 3px; 
 
    margin: 0 0; 
 
    line-height: 3px; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-tap-highlight-color: transparent; 
 
    font-spacing: .06px; 
 
} 
 

 
.nav>li>a { 
 
    letter-spacing: 1px; 
 
} 
 

 
.dropdown, 
 
.dropdown_trigger, 
 
.dropdown_trigger2, 
 
.artist_overlay li, 
 
.btn_follow a, 
 
.nav_bar { 
 
    display: block; 
 
} 
 

 
.main_div, 
 
.nav>li>a { 
 
    font-size: 12.5px; 
 
    font-weight: 500; 
 
    padding: 10px 6px; 
 
} 
 

 
.search_term { 
 
    /* padding-right: 16px; */ 
 
    background-color: #F4F4F4; 
 
    width: 169px; 
 
    height: 33px; 
 
    padding-left: 10px; 
 
} 
 

 
input[type=text] { 
 
    border: 0; 
 
} 
 

 
.menu_search2 { 
 
    width: 211px; 
 
    padding-top: 2px; 
 
} 
 

 
.button_search { 
 
    color: #FFF; 
 
} 
 

 
.back { 
 
    background-image: url("big_search.png"); 
 
    -webkit-transition: background .3s; 
 
    transition: background .3s; 
 
} 
 

 
.menu_search2 button { 
 
    height: 33px; 
 
    width: 42px; 
 
    font-size: 16px; 
 
    border-radius: 0; 
 
} 
 

 
.search_border { 
 
    line-height: 1em; 
 
    cursor: pointer; 
 
    border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
} 
 

 
.button_search { 
 
    overflow: visible; 
 
    -webkit-appearance: button; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
.nav_icons, 
 
.nav_icons .nav>li { 
 
    margin-left: 0; 
 
} 
 

 
.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2, 
 
.screen_area { 
 
    margin: 0; 
 
} 
 

 
.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2 { 
 
    width: 34px; 
 
} 
 

 
.dropdown_trigger, 
 
.dropdown_trigger2 { 
 
    width: 14px; 
 
} 
 

 
.wish_list { 
 
    font-size: 23px; 
 
} 
 

 
.drop:hover { 
 
    z-index: 100002; 
 
    width: 31px; 
 
} 
 

 
.wish_list:hover { 
 
    color: #739FB1; 
 
} 
 

 
.dropdown_trigger2 { 
 
    background: url("cart.png") no-repeat; 
 
} 
 

 
.trig_drop, 
 
.login { 
 
    border: 2px solid transparent; 
 
} 
 

 
.trig_drop:hover, 
 
.dropdown:hover, 
 
.drop:hover { 
 
    border: 2px solid #333; 
 
} 
 

 
.dropdown:hover { 
 
    z-index: 100003; 
 
} 
 

 
.trig_drop:hover { 
 
    z-index: 100001; 
 
} 
 

 
.nav_user2, 
 
.badges .year { 
 
    font-weight: 700; 
 
} 
 

 
.nav_user2, 
 
.img { 
 
    height: 35px; 
 
} 
 

 
.nav_user2 { 
 
    border-right: 1px solid #BEBEBE; 
 
    padding-top: 7px; 
 
    font-spacing: .6px; 
 
    width: 164px; 
 
} 
 

 
.search_term, 
 
.dropdown, 
 
.nav>li>a, 
 
.nav_bar, 
 
.btn_follow a, 
 
.nav_login2 .nav>li>a { 
 
    font-size: 13px; 
 
} 
 

 
.nav.adus { 
 
    padding-left: 5px; 
 
    padding-bottom: 3px; 
 
} 
 

 
.nav_link { 
 
    margin-left: 10px; 
 
} 
 

 
.dropdown_menu, 
 
.wrap, 
 
.add { 
 
    text-align: left; 
 
} 
 

 
.dropdown_menu { 
 
    width: 225px; 
 
    padding: 15px; 
 
} 
 

 
.dropdown_menu { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 0; 
 
    background-color: #FFF; 
 
    z-index: 100000; 
 
    border: 2px solid #000; 
 
    padding: 20px; 
 
} 
 

 
.dropdown-menu, 
 
.button_search, 
 
.dropdown { 
 
    -webkit-transform: translateZ(0); 
 
} 
 

 
.dropdown-menu { 
 
    transform: translateZ(0); 
 
    display: none; 
 
} 
 

 
.wrap, 
 
.container_nav, 
 
.copyright, 
 
.legal, 
 
.cont { 
 
    width: 1022px; 
 
} 
 

 
.wrap, 
 
.footer, 
 
.legal { 
 
    clear: both; 
 
} 
 

 
.wrap { 
 
    padding: 5px 10px 0; 
 
    height: 1261px; 
 
} 
 

 
.content_header { 
 
    margin-bottom: 20px; 
 
} 
 

 
.content_header .label { 
 
    font: 700 25px/30px Helvetica, sans-serif; 
 
} 
 

 
.label a:hover { 
 
    color: #6EB1EC; 
 
} 
 

 
.col_small .menu div { 
 
    margin-bottom: 15px; 
 
} 
 

 
.photo { 
 
    border: 1px solid #eee; 
 
    padding: 2px; 
 
    width: 150px; 
 
    background: #fff; 
 
} 
 

 
.btn_follow { 
 
    margin: 10px 0; 
 
} 
 

 
.menu a:hover, 
 
.sub_menu a:hover { 
 
    color: #f06; 
 
} 
 

 
.add, 
 
.col_small { 
 
    width: 150px; 
 
} 
 

 
.add { 
 
    background-color: #bbb; 
 
    border-radius: 4px; 
 
    padding: 3px 2px 2px 9px; 
 
} 
 

 
input[type=button]:hover { 
 
    background-color: #AEE869 
 
} 
 

 
.sub_menu { 
 
    border-top: 1px dotted #ccc; 
 
} 
 

 
.sub_menu h4 a { 
 
    color: #888; 
 
} 
 

 
.sub_menu div { 
 
    margin-bottom: 15px; 
 
} 
 

 
.badges { 
 
    margin-bottom: 50px; 
 
} 
 

 
.badges .year, 
 
.btn_follow a, 
 
.nav_bar { 
 
    color: #fff; 
 
} 
 

 
.badges .year, 
 
.dropdown .nav>li>a { 
 
    line-height: 16px; 
 
} 
 

 
.badges .year { 
 
    border-radius: 50%; 
 
    background-color: #e9008d; 
 
    width: 14px; 
 
    height: 14px; 
 
    font-size: 11px; 
 
    padding: 0 2px 2px 1px; 
 
} 
 

 
.badges .year, 
 
.badges img { 
 
    margin-right: 5px; 
 
} 
 

 
.badges .year, 
 
.menu_search2 button, 
 
.nav_bar, 
 
.banner { 
 
    text-align: center; 
 
} 
 

 
.col_big, 
 
.content_head, 
 
.profile_list { 
 
    width: 840px; 
 
} 
 

 
.flip_container { 
 
    cursor: pointer; 
 
} 
 

 
.flipper, 
 
.artist_overlay li { 
 
    width: 270px; 
 
    height: 270px; 
 
} 
 

 
.flipper img.active { 
 
    visibility: visible; 
 
} 
 

 
.artist_overlay li, 
 
.shop-nav, 
 
.nav li a { 
 
    overflow: hidden; 
 
} 
 

 
.artist_overlay li { 
 
    margin: 0 10px 10px 0; 
 
} 
 

 
.content_head.inner { 
 
    margin-top: 30px; 
 
} 
 

 
.content_head { 
 
    height: auto; 
 
    padding-bottom: 19px; 
 
} 
 

 
.content_head { 
 
    margin-bottom: 8px; 
 
    border-bottom: 2px solid #333; 
 
    height: 31px; 
 
} 
 

 
.content_head h3 { 
 
    font: 700 24px/30px Helvetica, sans-serif; 
 
    text-transform: none; 
 
    float: none; 
 
} 
 

 
.content_head .subtitle { 
 
    margin-top: 2px; 
 
    font: 11px/13px Helvetica, sans-serif; 
 
    color: #4a4a4a; 
 
} 
 

 
.content_head .latest_menu { 
 
    bottom: 13px; 
 
    font: 12px/14px Helvetica, sans-serif; 
 
} 
 

 
.content_head .latest_menu a { 
 
    color: #2786c2; 
 
} 
 

 
.cards li { 
 
    margin-right: 9px; 
 
    float: left; 
 
} 
 

 
.fbcontainer, 
 
.card { 
 
    height: 20px; 
 
} 
 

 
.fbcontainer { 
 
    width: 21px; 
 
    margin-top: -4px; 
 
    border-radius: 32px; 
 
    background-image: url(https://i.stack.imgur.com/Mm77y.png); 
 
} 
 

 
.fbcontainer:hover { 
 
    background-image: url(https://i.stack.imgur.com/Mm77y.png); 
 
} 
 

 
.cont { 
 
    margin: 0px auto; 
 
    height: 191px; 
 
    border-top: 1px solid #ccc; 
 
    padding-top: 10px; 
 
} 
 

 
.connect { 
 
    margin-top: 12px; 
 
} 
 

 
.img_fb { 
 
    width: 68px; 
 
    height: 101px; 
 
} 
 

 
.section li:first-child { 
 
    color: #868684; 
 
} 
 

 
.banner { 
 
    margin-right: 60px; 
 
    width: 145px; 
 
    height: 145px; 
 
} 
 

 
.section { 
 
    margin-right: 49px; 
 
    border: none; 
 
    margin-top: 25px; 
 
    height: 168px; 
 
} 
 

 
.footer a { 
 
    color: #868684; 
 
} 
 

 
.section li a { 
 
    color: #666; 
 
} 
 

 
.section li { 
 
    margin-bottom: 3px; 
 
} 
 

 
.footer a:hover { 
 
    text-decoration: underline; 
 
} 
 

 
.copyright { 
 
    padding-top: 6px; 
 
    height: 40px; 
 
} 
 

 
.card { 
 
    text-indent: -9999px; 
 
    width: 183px; 
 
    background-image: url(cards.png); 
 
} 
 

 
.position { 
 
    position: relative; 
 
} 
 

 
a { 
 
    color: #000000; 
 
    cursor: pointer; 
 
} 
 

 
.card, 
 
.banner, 
 
.fbcontainer, 
 
.nav_icons, 
 
.connect, 
 
.content_head, 
 
.latest_menu, 
 
.menu_search2 button, 
 
.col_big, 
 
.content_head, 
 
.profile_list { 
 
    float: right; 
 
} 
 

 
.content_head, 
 
.content_header h1 a, 
 
.screen_area, 
 
.content_header { 
 
    color: #333px; 
 
} 
 

 
.copyright, 
 
.section, 
 
.artist_overlay li, 
 
.badges, 
 
.year, 
 
.col_small, 
 
.nav>li { 
 
    float: left; 
 
} 
 

 
.add, 
 
.search_border, 
 
.screen_area { 
 
    border: 0; 
 
} 
 
.drop:hover { 
 
    width: auto; 
 
} 
 
.drop { 
 
    border: 2px solid transparent; 
 
    position: relative; 
 
} 
 
.cart-drp{ 
 
    display:none; 
 
    z-index:9; 
 
    border: 2px solid #000; 
 
    padding: 13px; 
 
    position: absolute; 
 
    right: -2px; 
 
    top: 100%; 
 
} 
 
.cart-drp h2 { 
 
    line-height: 100%; 
 
    white-space: nowrap; 
 
} 
 
.menu_cart.drop:hover .cart-drp { 
 
    display: block; 
 
} 
 
.cart-drp p { 
 
    line-height: 100%; 
 
    margin: 10px 0; 
 
} 
 
.cart-drp > a { 
 
    background: #000; 
 
    color: #fff; 
 
    padding: 10px; 
 
    line-height: 100%; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
.menu_cart.drop:hover { 
 
    border-bottom-color: transparent; 
 
} 
 
.menu_cart.drop::after { 
 
    background: #fff ; 
 
    bottom: -2px; 
 
    content: ""; 
 
    height: 3px; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 100%; 
 
    z-index: 9; 
 
}

<body class="screen_area"> 
 
    <form name="big_screen" id="big_screen"> 
 
    <div class="nav_bar">20% Off + Free Worldwide Shipping on Everything Today!</div> 
 
    <header class="main_div position"> 
 
     <div class="container_nav position clearfix"> 
 
     <div class="list_nav"> 
 
      <ul class="nav position"> 
 
      <li class="dropdown position img"> 
 
       <a href="#" class="trig_dropdown nav2_link" style="border: none"></a> 
 
      </li> 
 
      <li class="dropdown position art"> 
 
       <a href="#" class="trig_dropdown nav2_link">Art</a> 
 
      </li> 
 
      <li class="dropdown position home"> 
 
       <a href="#" class="trig_dropdown nav2_link">Home</a> 
 
      </li> 
 
      <li class="dropdown position tech"> 
 
       <a href="#" class="trig_dropdown nav2_link">Tech</a> 
 
      </li> 
 
      <li class="dropdown position women"> 
 
       <a href="#" class="trig_dropdown nav2_link">Women</a> 
 
      </li> 
 
      <li class="dropdown position men"> 
 
       <a href="#" class="trig_dropdown nav2_link">Men</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <div class="nav_search2 nav"> 
 
      <div class="menu_search2 position"> 
 
      <span> 
 
      <input type="text" name="search_text" id="search_text" class="search_term" placeholder="Search art & artists"/> 
 
      </span> 
 
      <span> 
 
      <button type="submit" name="search_button" id="search_button" class="button_search back search_border"></button> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     <div class="nav_icons"> 
 
      <ul class="nav position"> 
 
      <li class="menu_wishlist dropdown position"> 
 
       <a href="#"><span class="wish_list">&#9733;</span></a> 
 
      </li> 
 
      <li class="menu_cart drop"> 
 
       <a href="#"><span class="fbcontainer"></span></a> 
 
       <div class="cart-drp"> 
 
        <h2>Your cart is empty...</h2> 
 
        <p>Your shopping cart is empty!</p> 
 
        <a href="#">start here</a> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <div class="nav_user2"> 
 
      <ul class="nav position adus"> 
 
      <li> 
 
       <a href="#" class="trig_drop nav2_link">Blog</a> 
 
      </li> 
 
      <li> 
 
       <a href="#" class="trig_drop nav_link">Discover</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <div class="nav_login2"> 
 
      <ul class="nav"> 
 
      <li class="login dropdown position no_padding"> 
 
       <a class="trig_dropdown ">Join | Login</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    </form> 
 
    <div class="wrap position"> 
 
    <div class="content clearfix"> 
 
     <div class="content_header"> 
 
     <div> 
 
      <h1 class="label"> 
 
      <a><span>Nick La</span></a> 
 
      </h1> 
 
     </div> 
 
     </div> 
 
     <div class="col_small"> 
 
     <div class="prof_image"> 
 
      <a href="#"> 
 
      <img src="nick_img.png" alt="nick_img.png" class="photo " /> 
 
      </a> 
 
     </div> 
 
     <div class="btn_follow"> 
 
      <input type="button" value="&plus; Follow" name="add_button" id="add_button" class="add" /> 
 
     </div> 
 
     <div class="menu"> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Art Prints</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Framed Art Prints</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Canvas prints</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Metal Prints</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">iPhone & iPod Cases</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Stationery Cards</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">iPhone & iPod Skins</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Laptop & iPad Skins</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">V-neck T-shirts</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Long Sleeve T-shirts</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Tank Tops</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Biker Tanks</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Hoodies</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Throw Pillows</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Rectangular Pillows</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Carry-All Pouches</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Tote Bags</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Wall Clocks</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Mugs</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Rugs</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Laptop Sleeves</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Travel Mugs</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Metal Travel Mugs</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Comforters</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Bath Mats</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Floor Pillows</a> 
 
      </h4> 
 
      </div> 
 
     </div> 
 
     <div class="sub_menu"> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Promoted (2)</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      <h4> 
 
       <a href="#">Followers (157)</a> 
 
      </h4> 
 
      </div> 
 
      <div> 
 
      </div> 
 
     </div> 
 
     <div class="badges"> 
 
      <div class="year">11</div> 
 
      <img src="badge.png" alt="badge.png"> 
 
     </div> 
 
     </div> 
 
     <div class="col_big artist_shop"> 
 
     <div class="list_profile"> 
 
      <ul class="clearfix artist_overlay"> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper"> 
 
        <a class="event"> 
 
        <img src="big_s1.png" alt="big_s1.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper"> 
 
        <a class="event"> 
 
        <img src="big_s2.png" alt="big_s2.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper"> 
 
        <a class="event"> 
 
        <img src="big_s3.png" alt="big_s3.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper"> 
 
        <a class="event"> 
 
        <img src="big_s4.png" alt="big_s4.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper"> 
 
        <a class="event"> 
 
        <img src="big_s5.png" alt="big_s5.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper"> 
 
        <a class="event"> 
 
        <img src="big_s6.png" alt="big_s6.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper"> 
 
        <a class="event"> 
 
        <img src="big_s7.png" alt="big_s7.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper position"> 
 
        <a class="event"> 
 
        <img src="big_s8.png" alt="big_s8.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <div class="flip_container"> 
 
       <div class="flipper position"> 
 
        <a class="event"> 
 
        <img src="big_s9.png" alt="big_s9.png"> 
 
        </a> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="content_head position inner"> 
 
     <h3>Latest</h3> 
 
     <div class="subtitle">Uploaded By Nick La</div> 
 
     <ul class="latest_menu position"> 
 
      <li> 
 
      <a href="#">See More</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="profile_list"> 
 
     <ul class="cards clearfix"> 
 
      <li> 
 
      <div class="image_wrap"> 
 
       <a> 
 
       <img src="wrap_img1.png" alt="wrap_img1.png" /> 
 
       </a> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="image_wrap"> 
 
       <a> 
 
       <img src="wrap_img2.png" alt="wrap_img2.png" /> 
 
       </a> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="image_wrap"> 
 
       <a> 
 
       <img src="wrap_img3.png" alt="wrap_img3.png" /> 
 
       </a> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="image_wrap"> 
 
       <a> 
 
       <img src="wrap_img4.png" alt="wrap_img4.png" /> 
 
       </a> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
    <div class="cont clearfix"> 
 
     <div class="connect"> 
 
     <div class="connect_one"> 
 
      <span><img src="connect.png" alt="connect.png"></span> 
 
     </div> 
 
     <a class="img_fb"><img src="facebook.png" alt="facebook.png"></a> 
 
     <a class="img_fb"><img src="twitter.png" alt="twitter.png"></a> 
 
     <a class="img_fb"><img src="instagram.png" alt="instagram.png"></a> 
 
     <a class="img_pin"><img src="pinterest.png" alt="pinterest.png"></a> 
 
     </div> 
 
     <div class="banner"> 
 
     <a class="join"><img src="join_us.png" alt="join_us.png" /></a> 
 
     </div> 
 
     <div class="heigh"></div> 
 
     <div class="multi_col"> 
 
     <ul class="section"> 
 
      <li>Help</li> 
 
      <li><a>Track My Order</a></li> 
 
      <li><a>Return My Order</a></li> 
 
      <li><a>Contact & FAQs</a></li> 
 
      <li><a>Selling</a></li> 
 
      <li><a>About Us</a></li> 
 
      <li><a>Curator Program</a></li> 
 
      <li><a>Wholesale Program</a></li> 
 
     </ul> 
 
     <ul class="section"> 
 
      <li>Shop</li> 
 
      <li><a>Art Prints</a> <a> & \t </a> <a>Framed Art Prints</a></li> 
 
      <li><a>Stretched Canvases</a></li> 
 
      <li><a>iPhone Cases</a></li> 
 
      <li><a>Laptop Skins & iPhone Skins</a></li> 
 
      <li><a>T-shirts & Hoodies</a></li> 
 
      <li><a>Gift Cards</a></li> 
 
     </ul> 
 
     <ul class="section"> 
 
      <li>News & Promos</li> 
 
      <li><a>Blog</a></li> 
 
      <li><a>Collabs</a></li> 
 
      <li><a>Newsletter</a></li> 
 
      <li><a>Refer a Friend</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="legal clearfix"> 
 
     <div class="copyright"> 
 
     &copy; 2017 Society6, LLC. LG Commerce. Some rights reserved. 
 
     <a href="#">Privacy Policy</a> | 
 
     <a href="#">Term of Service</a> 
 
     <div class="card"> 
 
      Visa, Mastercard, PayPal, American Express, Discover 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Answer 2

你可以试试这个...使用添加类：悬停

.mainmenu { 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    padding: 15px; 
 
    -webkit-transition: all .5s; 
 
} 
 

 
.submenu { 
 
    position: absolute; 
 
    height: 0px; 
 
    opacity: 0; 
 
    -webkit-transition: all .5s; 
 
} 
 

 
.mainmenu:hover { 
 
    border: 1px solid #000; 
 
    -webkit-transition: all .5s; 
 
} 
 

 
.mainmenu:hover .submenu { 
 
    border: 1px solid #000; 
 
    padding: 50px; 
 
    height: auto; 
 
    top: 100%; 
 
    left: -1px; 
 
    opacity: 1; 
 
    -webkit-transition: all .5s; 
 
} 
 

 
.mainmenu:hover .hide_line { 
 
    height: 5px; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 0px; 
 
    background: #fff; 
 
    z-index: 1000; 
 
}

<div class="mainmenu"> 
 
    Menu 
 
    <div class="hide_line"> 
 
    </div> 
 
    <div class="submenu"> 
 

 
    submenu 
 
    </div> 
 
</div>

Answer 3

使用快鱼菜单可能会有帮助。这是现成的，容易，可以根据要求定制。

superfish working and download link