Question

我是新来的，我真的需要关于下拉菜单的帮助。事情是我只想在我将光标移动到jewlery上时才需要下拉菜单，但是当我将光标移动到jewlery或装饰或艺术上时，它会显示到处都是下拉菜单。提前致谢！ Image how looks mine version of dropdown menu And this is original how should look 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 a {
	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 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>
		
		<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 You Love</h1>
	</div>
	
	     <div id="footer">
		     
			 
			<div id="copy">
			    © 2016 HAN design. All rights reserved. Built by 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>

Answer 1

您拥有dropdown课程内的所有链接。相反，dropdown类应仅与jewelry链接一起使用。

尝试这样做：

<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>

下拉菜单不知道该怎么做

1 个答案: