I created a page based on HTML and CSS I got whole screen layout but I don't know how to create a dropdown with hover I'm trying my best to reach out my inspirational menu. My page doesn't look like what I am expecting it to be. can someone suggest me a clear solution. I've used only use HTML5 or CSS3. Kindly look have a look,
* { 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">★</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="+ 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"> © 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> 
