title: another box in menu bar html css
body: <p>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
  <img src="https://i.stack.imgur.com/oN89R.png" alt="enter image description here"></p>
  
  <p>code</p>
  
  <pre><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;
  
          }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  &lt;ul class="navbar"&gt;
  &lt;li&gt;&lt;a href="#"&gt;RESEARCH&lt;/a&gt;
  &lt;ul id="subnavlist"&gt;
  &lt;li&gt;&lt;a id="subcurrent" href="About_gjbssr.html"&gt;About GJBSSR&lt;/a&gt;
  &lt;ul&gt;
                               &lt;li&gt; &lt;a href="#" &gt;Link&lt;/a&gt;&lt;/li&gt;
  
                           &lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Data_collec_services.htm"&gt;Data Collection Services&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Proof_Edit.html"&gt;Editing &amp;amp; Proof Reading&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="active"&gt;&lt;a href="contact.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>any one tell me please?</p>