I'm trying to add a "sub menu" to a drop down menu.but not working, i have little knowledge of css , i am not getting how to do this. i want the sub-menu open to right side when cursor is placed on it Here is the css and html relating to it. please help me..
CSS AND HTML
#menu{background:#f0f0f0;border:1px solid #ddd;color:#ddd;height:35px;font-family:'Oswald', Arial, sans-serif;width:1090px;margin:0 auto;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:35px;width:1100px}
#menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;font-weight:normal}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#77778b;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 1px 0 #fff;}
#menu li a{border-right:1px solid #e5e5e5;}
#menu li a:hover {color:#444;background-color:#e5e5e5;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#77778b}
#menu label span{font:normal 14px Oswald;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#f0f0f0;border-top:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#77778b;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#9292a2 transparent transparent transparent;position:absolute;top:14px;right:9px}
#menu ul.menus a:hover{background:#ddd;color:#333}<nav id='menu'>
<input type='checkbox'/>
<label><i class='icon-reorder'/><span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a class='dropdown' href='#'>Regulation 2008</a>
<ul class='menus'>
<li>
<a class='dropdown' href='#'>B.E. Mechanical Engineering</a>
<ul class='menus'>
<li><a href='#'>Syllabus</a></li>
<li><a href='#'>Previous Year Question Papers</a></li>
</ul>
</li>
<li><a href='#'>B.E. Automobile Engineering</a></li>
<li><a href='#'>B.E. Aeronautical Engineering</a></li>
</ul>
</li>
<li><a class='dropdown' href='#'>Regulation 2013</a>
<ul class='menus'>
<li><a href='#'>B.E. Mechanical Engineering</a></li>
<li><a href='#'>B.E. Automobile Engineering</a></li>
<li><a href='#'>B.E. Aeronautical Engineering</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
</ul>
</nav>try this css , this may help u...
#nav {
list-style:none inside;
margin:0;
padding:0;
text-align:center;
}
#nav li {
display:block;
position:relative;
float:left;
background: #006633; /* menu background color */
}
#nav li a {
display:block;
padding:0;
text-decoration:none;
width:200px; /* this is the width of the menu items */
line-height:35px; /* this is the hieght of the menu items */
color:#ffffff; /* list item font color */
}
#nav li li a {font-size:80%;} /* smaller font size for sub menu items */
#nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */
#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides sublists */
}
#nav li:hover ul ul {display:none;} /* hides sub-sublists */
#nav li:hover ul {display:block;} /* shows sublist on hover */
#nav li li:hover ul {
display:block; /* shows sub-sublist on hover */
margin-left:200px; /* this should be the same width as the parent list item */
margin-top:-35px; /* aligns top of sub menu with top of list item */
}
check this fiddle-> http://jsfiddle.net/oqww08s4/2/
or if u want in different way then try this fiddle -> http://jsfiddle.net/6kDG8/2/