Drop-down menu collapses as I move downward

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

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums