The element is perceived as a whole control due to label and triangle proximity and dropdown pattern familiarity. In your second option you divide the control on two parts, implementing rules which are hidden to users. So this way could lead to user's confusion because it breaks familiar pattern.
First option is better. At least, interaction rules are obvious at first sight. Then, on mouse over, user discovers element's content. You also could handle click event for the
Sport label, which leads to
All sports page. Such solution is used quite often in menu.
Although there are two links to the same page (
All sports), the interaction is non-confusing for a user.
An example of such solution you could see here, at SE user menu:
UPDATE on @André comment
You mentioned panel (ribbon, toolbar) extender control, which is not fits this question. As @Larson said, he used dropdown element with subitems. To demonstrate the difference with real-world examples, take a look at the picture, please.
The last picture with border setup dropdown button is close to @Lars' second option. With a little differences:
- On mouse over the button clearly displays two parts: the button itself and dropdown button (triangle).
- Inside dropdown panel there is the same border style as on the button's face, i.e. close to @Lars' first option.
- In Word users have several ways to perform the same action, but on site this menu could be single mean for an action, so it should be totally clear.