Ivan Milutinovic Ivan Milutinovic - 3 months ago 14
CSS Question

Dropdown menu don't know what to do

im new here, and i really need help about dropdown menu. The thing is that i want dropdown menu only when i move cursor on jewlery, but when i move cursor on jewlery or decor or art it shows dropdown menu everywhere. Thanks in advance! 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

you have all the links present inside dropdown class. Instead dropdown class should only be used with 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