How to indicate top level menu not clickable?

Question

Working very test example here:
http://learntango.webfactional.com/

I am working to make my Argentine Tango website more friendly to new devices

• mobile
• touchpad
• etc

I (the tango teacher) am doing this myself for my small tango business

• solutions should be as simple as possible
  
• currently using almost only css and xhtml
  
• because I will soon be hosting many videos, I am learning how to do this in Django (which is why my links don't need .html, for example).
  

I found that my suckerfish dropdowns will work on my mobile phone if I change them from

<li><a href="Home">Home</a>
    <div class="drop_down"><ul>
        <li><a href="/">Home</a></li>
        <li><a href="About_Us">About Us</a></li>
        <li><a href="What_Students_Say">What Students Say</a></li>
    </ul></div></li>
<li><a href="Instruction">Classes</a> 
    <div class="drop_down"><ul>
        <li><a href="Instruction">Classes / Performance Group</a></li>
        <li><a href="Privates">Privates / Semi Privates</a></li>
        <li><a href="Intensive">Tango Intensive</a></li>
    </ul></div></li>

-->

<li><a href="#">Home</a>
    <div class="drop_down"><ul>
        <li><a href="/">Home</a></li>
        <li><a href="About_Us">About Us</a></li>
        <li><a href="What_Students_Say">What Students Say</a></li>
    </ul></div></li>
<li><a href="#">Classes</a> 
    <div class="drop_down"><ul>
        <li><a href="Instruction">Classes / Performance Group</a></li>
        <li><a href="Privates">Privates / Semi Privates</a></li>
        <li><a href="Intensive">Tango Intensive</a></li>
    </ul></div></li>

In other words, if I turn the top level link into an on-page link (#). This allows the top level to become active/have focus, showing the dropdown, on a mobile phone, without actually navigating you away.
However, from a UI perspective, I want to make sure that users realize that most of these top-level links are not clickable.

I have removed the highlighting, the underlining, and the change in the mouse pointer, but I think that for users on a PC, this is perhaps not intuitive enough. Is there some other visual cue that I can add so that the user doesn't click the top level menu in vain?

• arrows that point up / down
  
• a more unifying coloring between the top level menu and the drop downs
  
• make the text at the top level disappear when it's hovered over, displaying only the words below?
• "grey" out the words?

Fundamentally, I think I like this solution (easy for me to do, and probably reasonably cross-browser compatible, across devices). However, I don't want to confuse the "normal" users.

Any advice?

Answer 1

One way I can see it is by merely fading the Top Level Menu Item simultaneously with displaying the drop down.

That is, initially the user sees the menu bar. When he points to a menu item, the drop down appears and the menu item fades -- this will shift the user's focus from the menu item and on to the drop down -- effectively telling him what is 'active' and what is not. If needed, I can post some images here to clarify the point.

Just ensure that the drop down appears first and the menu item starts fading immediately after.

Answer 2

Take into account affordance and feedback on the hover state.

The affordance (visual aspect) of the menu item should not convey that it is clickable but yes 'hoverable'. Make it visually similar to other menu items, but perhaps with a more plain aspect, such as a faded saturation or alpha.

The feedback on hover should show the default cursor () instead of the clicking hand ( ) and drop down the sub-menu, but no reaction on the menu item itself.