floating menu dropdown doesn't show

Question

I have a problem with my dropdown or submenu. It worked perfectly fine before, but after I changed my menu to be floating, the submenu won't show anymore. this is the code I used for menu:

border-bottom:2px solid #e9e9e9;
position:fixed;
width:2000px;
background-color:#ffffff;
padding-left:605px;
padding-right:210px;
margin-right:-200px;

And this is my website http://lobaab.com/ could you help me on how to fix this plz

Answer 1

Nested ULs are hidden by display: none in the default state, and you never change this property to block.

.sf-menu li:hover > ul {
    display: block !important; /* importnat isn't necessary if you know how strong selector you need to use */
}

Than, you set width: 100% for submenu, but it´s width of their parent (LI). You want probably set higher width, or don´t set the width exactly and use only white-space: nowrap - submenu will have the width of the longest item.