菜单栏中的另一个框html css

Question

我尝试创建框，例如链接框..所以当我将鼠标悬停在研究上时，菜单会出现，例如关于gjbssr，数据收集服务等...但是链接总是出现在这个菜单中，我希望当我将鼠标悬停在约然后会出现gjbssr链接框 图片

码

    .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><a href="#">RESEARCH</a>
<ul id="subnavlist">
<li><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
<ul>
                             <li> <a href="#" >Link</a></li>

                         </ul></li>
<li><a href="Data_collec_services.htm">Data Collection Services</a></li>
<li><a href="Proof_Edit.html">Editing &amp; Proof Reading</a></li>
</ul>
</li>
<li id="active"><a href="contact.html">CONTACT US</a></li>
</ul>
</div>

任何人都告诉我吗？

Answer 1

试试这个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;
}

编辑旧

http://jsfiddle.net/h0b8h1ek/

修改

到目前为止没有注意到，你的代码出错是因为你使用//开始在css / *中发表评论这是我改变的部分

/*i add this css code for link box*/

这似乎解决了你的问题，这是指向小提琴的链接http://jsfiddle.net/h0b8h1ek/1/