The submenu is displayed and you don't want to hide it.

Today there is a small function, that is mouse after the main menu, the submenu will be permanently displayed, unless the page is refreshed.

First look at the effect of the year implementation:

HTML code:

Source Code:

<DivID= "Top">            <DivID= "Top_1">                <ul>                                       <Listyle= "position:relative;">                        <ahref="#"ID= "Menu1"style= "text-decoration:none; color:white;">Main Course Name</a>                        <ulID= "SubMenu1"style= "width:300px; position:absolute; display:block;">                            <Li><ahref="#">Sub-dish name one</a></Li>                            <Li><ahref="#">Sub-dish name two</a>|</Li>                            <Li><ahref="#">Sub-dish name three</a>|</Li>                            <Li><ahref="#">Sub-dish name four</a>|</Li>                        </ul>                    </Li>                </ul>            </Div>        </Div>

View Code

Using the jquery library:

<src= "~/scripts/jquery-2.2.1.js"></script> 

Write JS code:

Source Code:

$ (function  () {            $ ("#SubMenu1"). Hide ();                       $ ("#Menu1"). MouseOver (function  () {                                showpublish ();            });        });                function Showpublish () {            $ ("#SubMenu1"). Show ();        }

View Code

Next is the style:

Style Source code:

#top{Height:36px;width:100%;Margin-right:Auto;Margin-left:Auto;Background-color:#006428;Line-height:36px;text-align: Left;}#top #top_1{Height:36px;width:1110px;Line-height:36px;Margin-right:Auto;Margin-left:Auto;}#top #top_1 ul{margin:0px;padding:0px;List-style-type:None;}#top #top_1 Li{Display:Block;float: Right;width:Auto;Line-height:36px;Color:#FFFFFF;Height:36px;font-size:14px;}

View Code

The submenu is displayed and you don't want to hide it.