Question

I have this problem with CSS round corners. The link to example is here: http://www.xplus.dnawrot.nazwa.pl/

As you can see at the top on the dark blue background is a dropdown menu. The problem concern hover state on the first ul li list(items: oferta, klienci, akademia) wchih has children. As you will notice if you make mouse focus on the oferta item it display round corners properly, but if you go down to second ul li list (drop down – “rozwiazania branzowe”, “produkty”, etc) right side of round corner disapperas. And it’s logical becouse there is CSS style for li element and a element, and if the mouse leaves an a element the hover is removed. Does anyone has a solution for this problem?

If the description is not clear let me know and I’ll try to explain more detailed.

Regards,
Dave

Answer 1

Maybe you could try to wrap “a” and “ul” in a “span” tag and then use css to control span:hover instead of a:hover.

<li class="">
<span>
<a class="sf-with-ul" title="Klienci" href="http://www.xplus.dnawrot.nazwa.pl/pl/klienci">
<ul style="display: none; visibility: hidden;">
</span>
</li>

I haven’t tested it but you could give it a try.