Change subcategories appearance in Horizontal Top Menu

[blank_screen]

Hi guys,

 

I'm in the process of changing my old prestashop site. I uploaded the newest prestashop 1.6 on the server and now customising my top horizontal menu. I would like to change the appearance of subcategories, at the moment they all show up under the first left hand side menu category, but I would like them to appear under each category instead. I guess there are some css changes needed, but I'm not too competent at that and hope someone will be able to help me. Thanks in advance.

 

Here is the link to my shop test page:

http://goo.gl/HywpQM

 

And this is what I want the menu to look like, more less:

http://www.huygens.fr/

[blank_screen]

.sf-menu li ul {
  display: none;
--> left: 0; <--- remove that line!
  top: 28px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0; } }

I solved the problem myself, Im pasting the code here cause it might help someone else. The file that needs to be edited is superfish-modified.css in prestashop\themes\default-bootstrap\css\modules\blocktopmenu\css\. All you have to do is to remove "left:0;", after that submenu will appear under each category instead always under the first left one.

Edited August 23, 2014 by blank_screen (see edit history)