skaterdav85 Posted October 12, 2011 Share Posted October 12, 2011 I've heard of people using the hover pseudo class to toggle the visibility of things such as in drop down menus in navigations, rather than using JS. I'm trying to learn that but im not quite sure how. Here is my HTML. I want to hover over the anchor Portfolio and toggle the display of the ul right below it. <a href="">Portfolio</a><ul class="portfolio-types" id="portfolio-types"> <li><a href="">Shorts</a></li> <li><a href="">Music Videos</a></li> <li><a href="">Commercials</a></li> <li><a href="">Still</a></li> </ul> Link to comment Share on other sites More sharing options...
Don E Posted October 12, 2011 Share Posted October 12, 2011 Here's what you can try: <!doctype html><html><head><title>Drop Down</title><style type="text/css">#portfolio {display: inline-block;visibility: visible;}#portfolio-types {visibility: hidden;}#portfolio:hover ~ #portfolio-types {visibility: visible;display: inline;} </style> </head><body><a id="portfolio" href="">Portfolio<ul class="portfolio-types" id="portfolio-types"> <li><a href="">Shorts</a></li> <li><a href="">Music Videos</a></li> <li><a href="">Commercials</a></li> <li><a href="">Still</a></li> </ul> </a></body></html> The only problem is when mousing out from Portfolio, the ul list disappears. Perhaps some others can suggest more options. Link to comment Share on other sites More sharing options...
skaterdav85 Posted October 12, 2011 Author Share Posted October 12, 2011 interesting. I wasn't sure if there was a way to do it without having to place the list within the anchor, but maybe you have to. thanks! what does the ~ mean in CSS? Ive never seen that. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 12, 2011 Share Posted October 12, 2011 Actually that is a invalid way to use it, an inline element cannot surround a block element, it should be <a id="portfolio" href="">Portfolio</a><ul id="portfolio-types"> <li><a href="">Shorts</a></li> <li><a href="">Music Videos</a></li> <li><a href="">Commercials</a></li> <li><a href="">Still</a></li> </ul> the ~ targets sibling elements only at any location, where as + would only target the sibling element directly after it. Link to comment Share on other sites More sharing options...
skaterdav85 Posted October 12, 2011 Author Share Posted October 12, 2011 interesting. thanks. i did not know about that in CSS 3. I guess I could use the :hover pseudo class on all the anchors within #portfolio-types to make the menu visible when the user hovers over each of those links, but now that i think about it, I should probably just use JS since more people have JS enabled than the number of people with browsers that support CSS 3. Link to comment Share on other sites More sharing options...
Don E Posted October 12, 2011 Share Posted October 12, 2011 My mistake. I thought it was a parent - child relationship in order for the above to work. It's actually SIBLING. Thanks dsonesuk for the heads up. Link to comment Share on other sites More sharing options...
trinistorm Posted October 12, 2011 Share Posted October 12, 2011 I still haven't understood this properly yet but I came across grc.com's drop down menus and they were done without JavaScript. Hope it helps:http://www.grc.com/menu2/invitro.htm Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.