-2
即时通讯新的，我真的需要关于下拉菜单的帮助。事情是，只有当我将光标移到珠宝上时，我才想要下拉菜单，但是当我将光标移动到珠宝或装饰或艺术上时，它会在任何地方显示下拉菜单。提前致谢！ Image how looks mine version of dropdown menu And this is original how should look like下拉菜单不知道该怎么办
body{
\t background:#ffffff;
/*===========
Main
============*/ \t \t
}
#main{
\t margin:0 auto;
\t width:1500px;
}
/*============
Header
=============*/
#header{
\t padding:13px 0;
float:right;
\t text-indent:100%;
\t white-space:nowrap;
}
#logo{
\t padding-bottom:30px;
}
.dropdown{
\t display:inline;
\t float:right;
\t list-style:none;
}
.submenu {
\t z-index:9999;
\t background-color:white;
\t border:2px solid #6d6e70;
\t text-align:center;
\t }
.dropdown li{
\t float:left;
\t padding-top:40px;
\t text-align:right;
\t width:125px;
\t list-style:none;
}
.dropdown a{
\t font-size:16px;
\t text-decoration:none;
\t color:#6d6e70;
\t outline:none;
\t border-right:1px solid;
\t padding-right:35px; \t
}
\t
#slide{
\t display:block;
\t margin:auto;
\t clear:both;
\t
}
#slider {
\t display:block;
\t left:290px;
\t position:absolute;
\t top:39%;
}
#slider1{
\t display:block;
\t right:290px;
\t position:absolute;
\t top:39%;
}
#text-box{
\t background:#ffffff;
\t border:2px solid #6d6e70;
\t clear:both;
\t width:930px;
\t height:140px;
\t text-align:center;
\t font-size:75px;
\t margin:auto;
\t color:gray;
\t margin-top:20px;
}
#footer{
\t clear:both;
\t width:1400px;
\t padding-top:50px;
white-space:nowrap;
margin: 0 auto;
}
#copy{
\t float:left;
\t clear: both;
display: inline;
white-space: nowrap;
\t font-size:11px;
\t color:#7b7c7d;
}
#mid h5{
\t text-align:center;
\t clear: both;
display: inline;
white-space: nowrap;
\t color:#868688;
\t font-size:16px;
margin-left:85px;
}
#social-links ul{
\t display:inline;
\t clear:both;
\t text-align:center;
\t white-space:nowrap;
}
#social-links li{
\t display:inline;
\t
}
#social-links a{
\t display:inline;
\t height:25px;
\t width:25px;
\t float:right;
\t padding-left:20px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
\t
\t <title>Uhsome</title>
\t <link href="styles/Reset.css" rel="stylesheet" />
\t <link href="styles/Base.css" rel="stylesheet" />
</head>
<style>
.li a {
\t display: inline;
\t float: left;
\t padding-top: 40px;
\t width: 40px;
font-size: 16px;
border: none;
cursor: pointer;
margin-top:
}
.submenu{
\t margin-top:75px;
display: none;
position: absolute;
min-width: 175px;
min-height: 15px;
}
.submenu a {
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>
\t \t
\t \t <li><a href="#"> rugs </a></li>
\t \t <li><a href="#"> furniture </a></li>
\t \t <li><a href="#"> decor </a></li>
\t \t <li><a href="#"> art </a></li>
\t \t <li><a href="#"> apparel </a></li>
\t \t <li><a href="#"> beach </a></li>
\t \t <li><a href="#"> gifts </a></li>
\t \t <li><a href="#"> services</a></li>
\t \t
\t
\t \t </div>
\t \t \t <img id="logo" src="Images/Logo.jpg" height="87px" width="208px">
\t </div>
\t <!--
\t
\t SLIDER
\t
\t -->
\t <div id="slider" >
\t <a href="#"></a>
\t \t <img id="shape1" src="Images\shape1.jpg" width="90px" height="70px">
</div>
\t \t
\t \t
\t \t <div id="slider1">
\t <a href="#"></a>
\t <img id="shape1_copy" src="Images\shape1_copy.jpg" width="90px" height="70px">
\t
\t
\t </div>
\t
\t
\t </div>
\t
\t
<img id="slide" src="Images/Main.png" width="1100px" height="500px">
\t \t
\t \t
<div id="text-box">
\t <h1>Everything You Love</h1>
\t </div>
\t
\t <div id="footer">
\t \t
\t \t \t
\t \t \t <div id="copy">
\t \t \t © 2016 HAN design. All rights reserved. Built by Uhsome
\t \t \t </div>
\t \t \t
\t \t \t <div id="mid">
\t \t \t \t <h5>customer service</h5>
\t \t \t \t <h5>our company </h5>
\t \t \t \t <h5>contact us</h5>
\t \t \t \t </div>
\t \t \t \t
\t \t \t <div id="social-links">
\t \t \t <ul>
\t \t \t <li><a href="https://plus.google.com" target="top"></li>
\t \t \t \t <img src="Images/google_plus.png" width="35px" height="25px">
\t \t \t \t </a>
\t \t \t \t <li><a href="https://www.twitter.com" target="top"></li>
\t \t \t \t <img src="Images/twitter.png" width="30px" height="30px"/>
\t \t \t \t </a>
\t \t \t \t
\t \t \t \t
\t \t \t \t <li><a href="https://www.facebook.com" target="top"></li>
\t \t \t \t <img src="Images/facebook.png" width="15px" height="30px"/>
\t \t \t \t </a>
\t \t \t </ul>
\t \t \t
\t \t \t
\t \t \t </div> \t
\t \t \t
\t \t \t </div>
\t \t \t
\t \t
</body>
</html>
您可以编辑给我吗？ –
我刚刚做到了。看看我的答案，并找到你的代码和我的区别，你会知道的。 –
哦，好的。非常感谢！ –