Question

Im currently coding a responsive design and I am at the point where the navigation is to collapse for mobile.

To achieve this I have created two divs and an ul. The ul contains my nav elements while the divs are going to display nav images for a drop down with mobile and tablet.

HTML

<div id="nav-tablet"><img></div>
<div id="nav-mobile"><img></div>
<ul></ul>

CSS

#nav-tablet:hover + div + ul {
    display:inline;;
}

I’ve tested in and it works. I wanted to validate that it is valid CSS.

Answer 1

Yes, it’s completely valid. You can use as many +s as you like. (Or  , or >, or ~ for that matter.)

If you do just want to match any ul after #nav-tablet:hover, though, ~ does that nicely.

#nav-tablet:hover ~ ul