[RESOLVED]another box in menu bar html css

here i want to create another box ..when i drag mouse on ABOUT GJBSSR then i want another box appear like sub menu of ABOOUT GJBSSR e.g black box which i draw image

image

here is the code

.wrap   {
    width: 100%; /* Spans the width of the page */
    height: 40px;
    margin: 0; /* Ensures there is no space between sides of the screen and the menu */
    z-index: 99; /* Makes sure that your menu remains on top of other page elements */
    position: relative;
    background-color: #366b82;
    }

    .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;}

how to create this another box any help?

Does this help at all: http://jsfiddle.net/Lq8gyddx/

?

loydall123

Does this help at all: http://jsfiddle.net/Lq8gyddx/

?

when i try this it show me like this

Hi Bakhtawar,

According to your code and description, I test your code, and I would like to suggest you add the following code into your CSS style.

            .navbar ul {
                position: absolute;
                display: none;
                width: 130px;
            }

            .navbar li ul a {
                float: left;
                width: 130px;
            }

            .navbar ul ul {
                top: auto;
            }

            .navbar li ul ul {
                left: 130px;
                margin: 0px 0 0 0px;
            }
            .navbar li:hover ul ul, .navbar li:hover ul ul ul, .navbar li:hover ul ul ul ul {
                display: none;
            }

            .navbar li:hover ul, .navbar li li:hover ul, .navbar li li li:hover ul, .navbar li li li li:hover ul {
                display: block;
            }

With reference to this thread: http://forums.asp.net/t/2013075.aspx.

If you have any other questions about my reply, please let me know freely.

Best Regards,
Dillion

Zhi Lv – MSFT

Hi Bakhtawar,
According to your code and description, I test your code, and I would like to suggest you add the following code into your CSS style.
            .navbar ul {
                position: absolute;
                display: none;
                width: 130px;
            }

            .navbar li ul a {
                float: left;
                width: 130px;
            }

            .navbar ul ul {
                top: auto;
            }

            .navbar li ul ul {
                left: 130px;
                margin: 0px 0 0 0px;
            }
            .navbar li:hover ul ul, .navbar li:hover ul ul ul, .navbar li:hover ul ul ul ul {
                display: none;
            }

            .navbar li:hover ul, .navbar li li:hover ul, .navbar li li li:hover ul, .navbar li li li li:hover ul {
                display: block;
            }

With reference to this thread: http://forums.asp.net/t/2013075.aspx.

If you have any other questions about my reply, please let me know freely.

Best Regards,
Dillion

ok i try ur code but no effect on menu

here is code

css

 .wrap	{
	width: 100%; /* Spans the width of the page */
	height: 40px; 
	margin: 0; /* Ensures there is no space between sides of the screen and the menu */
	z-index: 99; /* Makes sure that your menu remains on top of other page elements */
	position: relative; 
	background-color: #366b82;
	}
	
	.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;}

		
		
    .navbar ul {
                position: absolute;
                display: none;
                width: 130px;
            }

            .navbar li ul a {
                float: left;
                width: 130px;
            }

            .navbar ul ul {
                top: auto;
            }

            .navbar li ul ul {
                left: 130px;
                margin: 0px 0 0 0px;
            }
            .navbar li:hover ul ul, .navbar li:hover ul ul ul, .navbar li:hover ul ul ul ul {
                display: none;
            }

            .navbar li:hover ul, .navbar li li:hover ul, .navbar li li li:hover ul, .navbar li li li li:hover ul {
                display: block;
            }

html

<div id="wrap">
<ul class="navbar">

</ul>
</li>
<li><a href="Publishing_serv.html">PUBLISHING </a></li>
<li><a href="http://www.gcbss.org">CONFERENCES</a></li>
<li><a href="Exhibition.html">EXHIBITION</a></li>

<li><a href="Research.html">RESEARCH</a>
<ul id="subnavlist">

<li><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>

                             <li class=""> <a href="#" >Link</a></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>

Hi Bakhtawar,

Please modify your code as below:

    <div id="wrap">
        <ul class="navbar">
        <li><a href="Publishing_serv.html">PUBLISHING </a></li>
        <li><a href="http://www.gcbss.org">CONFERENCES</a></li>
        <li><a href="Exhibition.html">EXHIBITION</a></li>
        <li>
            <a href="Research.html">RESEARCH</a>
            <ul id="subnavlist">
                <li><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
<ul> <li class=""> <a href="#">Link</a></li> </ul>
<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>

Best Regards,
Dillion

Leave a Reply