another box in menu bar html css - html

Question

i try to create box e.g link box.. so when i hover mouse on research then menu appears e.g about gjbssr,data collection services etc... but link always appear with this menu and i want when i hover mouse on about gjbssr then link box will be appear
image
code
.navbar {
height: 50px;
padding: 15px;
margin: 0;
position: absolute; /* Ensures that the menu doesn’t affect other elements */
border-right: 1px solid #54879d;
margin-left: 55px;
padding-left:15px;
padding-bottom:15px;
padding-top:0px;
margin-left:25px;
}
.navbar li {
height: auto;
width: 131px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
.navbar li:hover, a:hover {background-color: #54879d;}
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.navbar li ul li {background-color: #54879d;}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {background-color: #366b82;}
// i add this css code for link box
.navbar li ul li ul li
{
margin-top:-50px;
margin-left:130px;
display:block;
}
html
<div id="wrap">
<ul class="navbar">
<li>RESEARCH
<ul id="subnavlist">
<li><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
<ul>
<li> <a href="#" >Link</a></li>
</ul></li>
<li>Data Collection Services</li>
<li>Editing & Proof Reading</li>
</ul>
</li>
<li id="active">CONTACT US</li>
</ul>
</div>
any one tell me please?

Answer 1

Try this http://jsfiddle.net/94bws6ab/2/
HTML
<div id="content">
<ul class="a">
<li class="a_a">About
<ul class="b">
<li class="b_b">BOX</li>
</ul>
</li>
</ul>
</div>
CSS
ul{
list-style:none;
}
.b{
display:none;
}
.a_a:hover .b{
margin-top:-15px;
margin-left:20px;
display:block;
}
EDIT OLD
http://jsfiddle.net/h0b8h1ek/
EDIT
Didn't notice it till now, your code went wrong because you used // to begin a comment in css /* is used this is the part that i changed
/*i add this css code for link box*/
That seemed to solve your problem here is the link to the fiddle http://jsfiddle.net/h0b8h1ek/1/