2016-08-08 4 views
-2

ここに新しい、私は本当にドロップダウンメニューについての助けが必要です。事は私がjewleryのカーソルを動かすときだけドロップダウンメニューがほしいと思うが、私がjewleryか装飾か芸術のカーソルを動かすときどこでもドロップダウンメニューを示す。前もって感謝します! 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>

答えて

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

あなたは私のためにそれを編集することはできますか? –

+0

私はやった。私の答えを見て、あなたのコードと私の違いを見て、あなたは知っているでしょう。 –

+0

ああ、大丈夫です。どうもありがとうございます! –

関連する問題