如何在Blogger中将子菜单添加到下拉菜单

Question

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='#'>BE 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='#'>BE Automobile Engineering</a></li> <li><a href='#'>BE Aeronautical Engineering</a></li> </ul> </li> <li><a class='dropdown' href='#'>Regulation 2013</a> <ul class='menus'> <li><a href='#'>BE Mechanical Engineering</a></li> <li><a href='#'>BE Automobile Engineering</a></li> <li><a href='#'>BE Aeronautical Engineering</a></li> </ul> </li> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> </ul> </nav> 

Answer 1

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/