CSS sub menu clicking issues - html

Question

I am developing a website.
On a menu section I added a sub menu.
On the sub menu, under PRODUCTS, I can't click on Air Sourced Heat Pump.
Can anyone help me?
This is my website: http://develop.com.sg/Enerprof/

Answer 1

This is because you have a hover action when hovering IVolt...
When you get over it, another submenu appears between IVolt and Air Sourced Heat Pump.
When getting "out" of this submenu, the IVolt menu disappears, and the Air Source option gets back to its inital position. At that moment, your cursor is OUT of the "Products" menu you want to reach...
If you want to change "no" code, (AND if your Air Source option IS NOT a submenu as IVolt is...) you just have to place it in first position in your Products menu...
Btw, we need some code to help you more...

Answer 2

You Give the hover effect in child node. so when you hover your mouse control he close the your submenu. change the css effect.

Answer 3

<ul>
<li>Spices
<ul>
<li>Ajwain Seed</li>
<li>Cardmom</li>
<li>Coriander</li>
<li>Cumin Seed</li>
<li>Dill Seed</li>
<li>Fennel Seed</li>
<li>Fenugreek</li>
<li>Red Chilli</li>
<li>Turmeric</li>
</ul>
</li>
<li>Pulses
<ul>
<li>Red Lentils</li>
<li>Green Peas</li>
<li>Cheak Peas</li>
</ul>
</li>
<li>Oil Seeds
<ul>
<li>Sesame seed</li>
<li>Rapeseeds</li>
<li>Niger Seed</li>
<li>Groundnut</li>
</ul>
</li>
<li>Grains
<ul>
<li>Maize</li>
<li>Wheat</li>
<li>Rice</li>
<li>Millet</li>
</ul>
</li>
<li>Cotton
<ul>
<li>Raw Cotton</li>
<li>Cotton Linter</li>
</ul>
</li>
<li>Animal Feed Products
<ul>
<li>houss.php</li>
<li>Rape Seed Meal</li>
<li>Soyabean Meal</li>
</ul>
</li>
</ul>
CSS :
.content2{width:883px; margin-top:5px; height:auto; margin:auto;}
.gallery-left{width:630px; height:323px; border:8px solid #f5f4f2; float:left;}
.prod-menu-right{width:210px; height:323px; border:8px solid #f5f4f2; float:right; background:url(../images/prod-menu-bg.png) repeat-x #74c305;}
.prod-menu-right h1{font-size:21px; color:white; text-align:center; margin-top:0px; font-family:"Times New Roman", Times, serif;}
.prod-menu-right ul{list-style:url(../images/arrow.png); margin:0px 25px 0px 25px; padding:0; font-size:12px;}
.prod-menu-right li{ height:25px; line-height:14px; padding-top:10px}
.prod-menu-right ul li a{color:#FFF; line-height:14px ;text-decoration:none;}
.prod-menu-right ul li a:hover{color:#333; text-decoration:underline}
.prod-menu-right li:hover{position:relative;z-index:1000; }
.prod-menu-right li:hover ul{margin-left:0px; margin-top:1px; text-align:left; width:180px;}
.prod-menu-right li:hover ul li{min-width:180px; position:relative;}
.prod-menu-right li:hover ul li a{border-bottom: 1px dotted; padding:10px 25px; color: #FFFFFF; display:block; font-size: 12px; line-height:14px; text-decoration:none; background-color:#669933;}
.prod-menu-right li:hover ul li a:hover {text-decoration:none; color:#fff; line-height:14px; background-color:#333; position:relative;}
.prod-menu-right ul li ul li { position:relative; display:inline-block;}
.prod-menu-right ul li ul li a{ display:none;}
Add <ul><li> Code and use this css to simple implement the menu... with your site..