CODEWITHSUNDEEP
htmlcssdrop-down-menu
bgdr
bgdr

Reputation: 15

CSS menu child align

Need some help with a drop down menu. I made a fiddle here: http://jsfiddle.net/bLL0rmbd/
I want to align the hover submenu like in the image:

http://i58.tinypic.com/2v865pl.jpg

HTML:

<div id="wrapper">
    <div id="navbar">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">SubMenu 1</a></li>
                    <li><a href="#">SubMenu 2</a></li>
                    <li><a href="#">SubMenu 3</a></li>
                </ul>       
            </li>                 
        </ul>
    </div>
</div>

CSS:

<style>
    #wrapper {padding: 0; margin: 30px}

    #navbar ul {
        padding: 0; 
        margin:0px; 
        list-style: none; 
        float:left; 
        background:#FF6;
    }
    #navbar ul li { display: inline-block; margin-right:20px;}
    #navbar ul li a {text-decoration:none;}
    #navbar ul ul { 
        position:absolute;
        display: none;
    }
    #navbar ul ul li {display:block;}

    #navbar ul li:hover > ul {
        display: block; 
        background-color:#CFC;
    }
</style>

Upvotes: 1

Views: 91

Answers (5)

priya786
priya786

Reputation: 1834

try this demo

#navbar ul {
padding: 0; 
margin:0px; 
list-style: none; 
float:left; 
background:#FF6;
position: relative;
}
#navbar ul ul { 
position:absolute;
display: none;
right: 0;
top: 100%;
}

Upvotes: 0

rajesh
rajesh

Reputation: 1485

Add this CSS style for your recent question:

li:hover{background-color:#CFC;}

#navbar ul li:hover > ul 
{   display: block; 
    background-color:#CFC;
    margin-left:-25px;                                            
}

Check Out this fiddle:http://jsfiddle.net/bLL0rmbd/11/

Upvotes: 0

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

You this css here

  #navbar ul {
  padding: 0; 
  margin:0px; 
  float:left; 
  background:#CFC;
  position: relative;
  }

 #navbar ul ul { 
  position:absolute;
  display: none;
  right: 0;
  top: 100%;
  }

Check the fiddle here

Upvotes: 0

Bipu Bajgai
Bipu Bajgai

Reputation: 404

i hope this works for you .

     #navbar ul {
padding: 0; 
  margin:0px; 
  list-style: none; 
 float:left; 
    background:#FF6;
  position: relative;

        }
    #navbar ul ul { 
position:absolute;
display: none;
  right: 0;
 top: 100%;
    }

I have only aded 3 lines of code pos: relative on ul and absolute value on dropdown.

Or you can set pos: relative to #navbar li and change absolute value for dropdown accrding to wish.

Cheers

Link to fiddle

Upvotes: 1

m0bi5
m0bi5

Reputation: 9452

Add a negative margin-left to the sub menu and it should work:

#navbar ul li:hover > ul 
{   display: block; 
    background-color:#CFC;
    margin-left:-25px;                                            
}

Updated fiddle:http://jsfiddle.net/bLL0rmbd/3/

Upvotes: 0

Related Questions