I am new to HTML/css.
I created dropdown menu like below in HTML. The menu structure is like in the image. It expands fine.but after expansion to level Agri S3.3.2.2.3, if I try to select Agri S3.3 the whole menu collapses. I want to understand mistake in my css file.
Top bar Menu like
Menu1 Menu2 Menu3 Menu4
Menu2 has Submenus and sub-sub menus as below
…Menu2.1
…menu2.2
…menu2.2.1
…menu2.2.2
…menu2.2.2.1
…menu2.2.2.2
…menu2.2.3
…menu2.3
I created css as below
* {
margin:0;
padding:0;
}
#menu {
margin-top:120px;
margin-left:0px;
}
#menu ul
{
margin-left:0px;
}
#menu ul li {
/* Important Attributes */
width:150px;
float:left;
/* decoration Attributes */
background-color: #CFDED3;
text-align:Center;
margin-left:10px;
list-style:none;
line-height:25px;
border-radius:15px;
}
#menu ul ul {
margin-left:0px;
}
#menu ul li:hover { background: #06F;}
#menu ul li:hover > ul{ display: block;}
#menu ul ul {
margin-left:10px;
margin-top:0px;
display:none;
}