Border Radius Drop Down Navigation


The drop-down nav shows square corners on the last item, that reach beyond the rounded styling of the drop down menu and looks broken in FF and Chrome – haven’t checked IE.
It’s the same on your demo version. I would have asked about this as a pre-sales issue but the client had their heart set on this theme. It’s a small thing, but which takes the edge off what is a great looking theme.


Original poster


This is the final code I used:

/* Fix for Menu Final Element Hover State */

#navigation li ul li:last-child a:hover {
-moz-border-radius-bottomright: 8px !important;
border-bottom-right-radius: 8px !important;
-moz-border-radius-bottomleft: 8px !important;
border-bottom-left-radius: 8px !important;

Original poster

#navigation li ul li:last-child a:hover {border-radius: 8px 8px 8px 8px !important ;}

Original poster