Most SEO friendly on-hover drop-down menu?

[surenot]

Can you suggest me which drop-down menu is the most SEO OK that will not cause any problems and that Google will be able to crawl it with no problems.

I want the one that show whenever you mouth over it.

Please share some code!

[goodroi]

If you are looking for the most SEO friendly internal links then you might want to focus more on embedded links in relevant content and less on stuffing navigation links.

[buckworks]

Look for a menu that uses CSS and not javascript to display the dropdown items.

[not2easy]

Lucy24 posted a very good example in the middle of a long tutorial type discussion here a few months ago, it is pretty far down the page here: [webmasterworld.com...]

Because links to resources aren't always set in stone I'm adding a quote here:

There are different ways of making dropdown menus. The pure-CSS method (no javascript) looks something like this, off the top of my head.

:: detour to look up analogous code of my own, because "off the top of my head" turns out to be an overstatement ::

CSS:
ul.dropmenu li {display: inline-block;}
ul.dropmenu ul {display: none;}
ul.dropmenu li:hover ul {display: block;}

HTML:
<ul class = "dropmenu">
<li>Good Stuff
<ul>
<li>Hidden 1</li>
<li>Hidden 2</li>
<li>Hidden 3</li>
</ul>
</li>
<li>Better Stuff
<ul>
<li>Hidden 1</li>
<li>Hidden 2</li>
<li>Hidden 3</li>
</ul>
</li>
</ul>

Did you catch the
ul.dropmenu li:hover ul

?
That's the magic that makes it all work. Things preceded by a colon are called "pseudo-classes" [w3.org]. This particular one means, reading from right to left:

"This style applies to an unordered list (ul)
that's inside of a list item (li)
which the user is currently hovering on (:hover)
when the whole thing is inside an unordered list of class 'dropmenu' (ul.dropmenu)"

And thanks again to lucy24 for sharing it.

[Robert Charlton]

Large drop-down menus, even if they are crawler-friendly, are IMO generally neither user friendly nor SEO friendly.

While the SEO of some 800-pound gorilla sites can survive using them, many smaller sites cannot, because they spread your inbound link-juice from home into too-many choices, both for the user and for Google.

Here's an old discussion about large site SEO that might be useful....

For Mega-Site SEO, Structure is King - not Content
http://www.webmasterworld.com/google/4238574.htm [webmasterworld.com]

Also see this important discussion...

The "Mega Menu" Problem and Google Rankings
Jul 1, 2008
http://www.webmasterworld.com/google/3687528.htm [webmasterworld.com]

Large drop-downs also don't work well with Responsive Design in mobile. I've seen differing opinions in how best to deal with large menus in mobile.

[Zivush]

I think Breadcrumb (navigation) manu is the most SEO friendly navigation technique.

[RedBar]

Whichever you go for ensure that it works with touch screens, tablets and phones otherwise it's utterly pointless:-))

[deeper]

@RedBar:
Many webmaster/CMS prefer parent items which open via hover instead of clicking. But mobile does not support hover mostly.
I have been very surprised to discover this recently.

[Wilburforce]

@surenot

I have tried various methods, but currently use a breadcrumb menu, combined with a mouseover (hover) JS drop-down menu where the script is in a folder that is blocked in robots.txt.

This stops spiders from having to trawl through a big on-page script, or from seeing a massive collection of links (which, as they have the breadcrumb menu, are irrelevant to them) in the js file.

The breadcrumb menu works best for spiders, and ensures that search engines can see your site hierarchy (which will be lost if you have a huge every-page-links-to-every-page CSS menu). It also ensures your site can be navigated without js (although most do, not all users have js enabled in their browsers).

This method seems to work for users and spiders without doing any ranking damage, but what is most suitable will depend on site size and structure.

A lot of the bigger players in my sector use expanding lists (so on mouseover - or sometimes clicking - a section titel you see all the subheadings and sub-pages in that section at once). I personally find that layout best for my own navigation of other sites, and I may implement that as an alternative to my current menu in the near future.

And...

mobile does not support hover mostly

...which can be a pain, especially if clicking opens the link, but some don't properly implement CSS either, and without it CSS expanding menus just look like a massive site-map.

[RedBar]

But mobile does not support hover mostly.

Yep, which is why I spent two years on and off developing my html5 responsive template testing it across all desktop browsers and as many Android/tablet/mobile browsers as I could.

Believe me, some of those Android browsers are horrible however, fortunately, the mainstream ones are ok, nevertheless it had to be done with the ever-increasing usage of mobile.

Forget mobile and you're basically telling the majority of users worldwide you're not interested in them, then again I have a global user base.

[aakk9999]

but currently use a breadcrumb menu, combined with a mouseover (hover) JS drop-down menu where the script is in a folder that is blocked in robots.txt.

This stops spiders from having to trawl through a big on-page script, or from seeing a massive collection of links (...)

I second that. If you use hover menus, unless your site is very small and narrowly focused, it is a good idea to stop bots seeing every menu link on every page as this will dilute focus of sections of the website. JS drop-down menu with JS blocked in robots.txt is one way on how to do it.

[deeper]

@RedBar:
Did you change from hover to click-dropdown? If yes, how?

My redesign with Wordpress again and again lets me wondering about this and that.... but many CMS and webmaster prefering hover-dropdowns in spite of many millions (even growing) mobile-users is still number one on my list. They often do incredible things for example in order to win some ms loading time, but hey, millions mobile user are prevented from half of the site...who cares...

[Robert Charlton]

Google's updated guidelines about blocking javascript might be causing some rethinking now about whether to block js in navigation.

Thought it worth mentioning in light of current discussion here...

Google Updates Webmaster Guidelines: Crawling Page Assets May Help SEO
http://www.webmasterworld.com/google/4711411.htm [webmasterworld.com]

[Wilburforce]

Bones just posted a link on another thread ([webmasterworld.com ]) to a John Mueller discussion:

[youtube.com ]

Bones identifies a section about 41m 15s in discussing disavow files, but immediately before it (at about 39m 30s) John Mueller discusses "Do internal backlinks affect Penguin?".

From what he says, I think it quite possible that a css menu (with a large number of backlinks using page-subject anchor-text) could trigger a keyword-stuffing penalty,

It would be interesting to hear whether anyone with a large css menu was penalised by Penguin.