im new here, , need dropdown menu. thing want dropdown menu when move cursor on jewlery, when move cursor on jewlery or decor or art shows dropdown menu everywhere. in advance! image how looks mine version of dropdown menu and original how should like
body{ background:#ffffff; /*=========== main ============*/ } #main{ margin:0 auto; width:1500px; } /*============ header =============*/ #header{ padding:13px 0; float:right; text-indent:100%; white-space:nowrap; } #logo{ padding-bottom:30px; } .dropdown{ display:inline; float:right; list-style:none; } .submenu { z-index:9999; background-color:white; border:2px solid #6d6e70; text-align:center; } .dropdown li{ float:left; padding-top:40px; text-align:right; width:125px; list-style:none; } .dropdown a{ font-size:16px; text-decoration:none; color:#6d6e70; outline:none; border-right:1px solid; padding-right:35px; } #slide{ display:block; margin:auto; clear:both; } #slider { display:block; left:290px; position:absolute; top:39%; } #slider1{ display:block; right:290px; position:absolute; top:39%; } #text-box{ background:#ffffff; border:2px solid #6d6e70; clear:both; width:930px; height:140px; text-align:center; font-size:75px; margin:auto; color:gray; margin-top:20px; } #footer{ clear:both; width:1400px; padding-top:50px; white-space:nowrap; margin: 0 auto; } #copy{ float:left; clear: both; display: inline; white-space: nowrap; font-size:11px; color:#7b7c7d; } #mid h5{ text-align:center; clear: both; display: inline; white-space: nowrap; color:#868688; font-size:16px; margin-left:85px; } #social-links ul{ display:inline; clear:both; text-align:center; white-space:nowrap; } #social-links li{ display:inline; } #social-links a{ display:inline; height:25px; width:25px; float:right; padding-left:20px; }<!doctype html> <html lang = "en"> <head> <meta charset="utf-8" /> <title>uhsome</title> <link href="styles/reset.css" rel="stylesheet" /> <link href="styles/base.css" rel="stylesheet" /> </head> <style> .li { display: inline; float: left; padding-top: 40px; width: 40px; font-size: 16px; border: none; cursor: pointer; margin-top: } .submenu{ margin-top:75px; display: none; position: absolute; min-width: 175px; min-height: 15px; } .submenu { padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .submenu { display: block; } </style> <body> <!-- main --> <div id="main"> <!-- header --> <div id="header"><a style="padding-right:15px">login</a> <a style="padding-right:15px">my cart(3)</a> <a style="padding-right:15px">search..</a> </div> <div class="dropdown"> <ul> <li> <a href="#">jewelry </a> <ul class="submenu"> <li><a href="#">necklaces</a></li> <li><a href="#">bracelets </a></li> <li><a href="#">rings</a></li> <li><a href="#">pendants </a></li> </ul> </li> <li><a href="#"> rugs </a></li> <li><a href="#"> furniture </a></li> <li><a href="#"> decor </a></li> <li><a href="#"> art </a></li> <li><a href="#"> apparel </a></li> <li><a href="#"> beach </a></li> <li><a href="#"> gifts </a></li> <li><a href="#"> services</a></li> </div> <img id="logo" src="images/logo.jpg" height="87px" width="208px"> </div> <!-- slider --> <div id="slider" > <a href="#"></a> <img id="shape1" src="images\shape1.jpg" width="90px" height="70px"> </div> <div id="slider1"> <a href="#"></a> <img id="shape1_copy" src="images\shape1_copy.jpg" width="90px" height="70px"> </div> </div> <img id="slide" src="images/main.png" width="1100px" height="500px"> <div id="text-box"> <h1>everything love</h1> </div> <div id="footer"> <div id="copy"> © 2016 han design. rights reserved. built uhsome </div> <div id="mid"> <h5>customer service</h5> <h5>our company </h5> <h5>contact us</h5> </div> <div id="social-links"> <ul> <li><a href="https://plus.google.com" target="top"></li> <img src="images/google_plus.png" width="35px" height="25px"> </a> <li><a href="https://www.twitter.com" target="top"></li> <img src="images/twitter.png" width="30px" height="30px"/> </a> <li><a href="https://www.facebook.com" target="top"></li> <img src="images/facebook.png" width="15px" height="30px"/> </a> </ul> </div> </div> </body> </html>
you have links present inside dropdown class. instead dropdown class should used jewelry link.
try doing this:
<ul> <li> <div class="dropdown"> <a href="#">jewelry </a> <ul class="submenu"> <li><a href="#">necklaces</a></li> <li><a href="#">bracelets </a></li> <li><a href="#">rings</a></li> <li><a href="#">pendants </a></li> </ul> </div> </li> <li><a href="#"> rugs </a></li> <li><a href="#"> furniture </a></li> <li><a href="#"> decor </a></li> //add rest </ul> 
Comments
Post a Comment