Wie man Dropdown-Menü mit :hover auf <a> an Stelle von bewegen Sie den Mauszeiger auf <ul>?

IE 6 nur unterstützt :Hover auf <a> dann können wir im css-drop-down mit :hover auf <a>

http://htmldog.com/articles/suckerfish/dropdowns/

Diesem Beispiel verwendet JavaScript, um hinzuzufügen, bewegen Sie den Mauszeiger auf LI

'sfhover' Klasse zum li-Elemente in der
'nav' id hatte ul-element, wenn Sie
'moused über' und entfernt es, mit einem
regulärer Ausdruck, wenn 'moused out".

So, jetzt haben wir das Suckerfish
das Abpumpen neuen Klassen, ist der nächste Schritt
einfach duplizieren Sie die :hover
der Selektor mit 'sfhover' Klasse
Selektoren:

  • Können Sie formulieren diese? Ich bin mir nicht sicher, was deine Frage ist.
  • Bitte formulieren.
  • Bearbeiten können Sie Ihre Frage zu klären, Ihre position über javascript und vielleicht erklären Sie Ihre Gründe für die Vermeidung einer javascript-Lösung?
  • Auch, IE6 gilt nicht für die :hover-Attributen, die auf Elemente innerhalb eines <a> Anker-tag. Also, wenn du hast <a><span/></span>, IE6 wird nicht gehorchen den CSS-Stil für a:hover span{}
InformationsquelleAutor Jitendra Vyas | 2009-12-09
  1. 2

    Können Sie Art damit es funktioniert. Der code unten zeigt ein funktionales Menü, das sich auf a:hover zu trigger-Anzeige. Jedoch, es kommt mit ein paar Vorsichtsmaßnahmen:

    • Da Sie nicht geschachtelt werden können <a /> tags in HTML oder XHTML, Sie beschränkt sich auf eine einzelne Ebene der Menüpunkte.
    • Aus dem gleichen Grund, Sie haben, JavaScript zu verwenden onclick event-Handler zum verarbeiten von Benutzer Klicks auf Menüpunkte.
    • IE6 scheint zu erfordern, ein :hover Regel auf das Anker-tag selbst, um hover-trigger-Verhalten. Ohne die #menu:hover Regel, die #menu:hover span wurde ignoriert. Die Regel muss mindestens eine Stil-Zuordnung, und nicht alle Eigenschaften, die zu funktionieren scheinen (z.B. background-color oder border gearbeitet, aber color nicht).

    Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Menu in IE6</title>
    <style type="text/css">
        #menu {
            background-color: #cccccc;
            color: black;
            text-decoration: none;
            position: relative;
        }

        #menu span {
            display: none;
        }

        /* I'm using <b /> tags for the submenu items, just to make the styling easier. */
        #menu span b {
            display: block;
            font-weight: normal;
        }

        /* IE6 seems to require some :hover rule on the anchor element itself.
           Without it, the '#menu:hover span' rule below is ignored. */
        #menu:hover {
            border: none;
        }

        #menu:hover span {
            background-color: #cccccc;
            cursor: pointer;
            display: block;
            position: absolute;
            top: 1em;
            left: 10px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" id="menu">Menu
            <span>
                <b onclick="alert('Item 1!');">Item 1</b>
                <b onclick="alert('Item 2!');">Item 2</b>
                <b onclick="alert('Item 3!');">Item 3</b>
            </span>
        </a>
        <p>
            Lorem ipsum doler sit amet...
        </p>
    </div>
</body>
</html>

    UPDATE:
    IE6 macht Art von Arbeit mit verschachtelten <a /> Elemente. Ich habe versucht, die Einbettung des Links in ein Untermenü, und es richtig angezeigt aber der Mauszeiger über die innere Verknüpfung verursacht, die die äußeren Glied zu verlieren :hover, und das Menü verschwindet unter dem cursor.

    Jedoch offenbar, wenn Sie wickeln Sie das Menü in einer Tabelle (wie gezeigt hier), wird es funktionieren. Beachten Sie, dass der untenstehende code funktioniert, aber nicht Valide und könnte sprengen, in anderen Browsern:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Menu in IE6</title>
    <style type="text/css">
        #menu {
            background-color: #cccccc;
            color: black;
            text-decoration: none;
        }

        #menu ul {
            display: none;
        }

        #menu:hover {
            border: none;
        }

        #menu:hover ul {
            background-color: #cccccc;
            display: block;
            margin: 0;
            margin-left: 10px;
            padding: 0;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" id="menu">Menu
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <ul>
                            <li><a href="http://www.google.com">Google</a></li>
                            <li><a href="http://www.yahoo.com">Yahoo</a></li>
                            <li><a href="http://www.stackoverflow.com">Stack Overflow</a></li>
                        </ul>
                    </td>
                </tr>
            </table>
        </a>
        <p>
            Lorem ipsum doler sit amet...
        </p>
    </div>
</body>
</html>
    • dann, wie dieses Menü funktioniert im IE6 ohne js grc.com/menu2/invitro.htm
    • warum sind Sie immer noch die Frage zu stellen, während Sie die Verknüpfung zu Lösungen, die passen Ihre constriants?
    • Ah, clever. Ich sah, dass der IE zeigt einen verschachtelten link richtig, aber es war nicht schön spielt mit :hover. Anscheinend wickeln Sie das Menü in einer Tabelle behebt, dass. Schrecklich nicht-standard, aber wenn Sie kümmern sich nicht um die Validierung dann denke ich, dass es funktionieren wird. Meine Antwort wurde aktualisiert und mit einer Erläuterung und Beispiel.
    • Es ist auch erwähnenswert, das knifflige bedingte Kommentar-Verwendung auf dieser Seite. Sie haben strukturiert Sie so, dass IE6 sehen die Tisch-verpackt <ul /> innerhalb der top-level-Menü anchor-element, aber alle anderen Browser sehen einen nicht gewickelten <ul /> neben das anchor-element.
    InformationsquelleAutor Annabelle
  2. 0

    Ja, können Sie, solange Sie das nest das sub-Menü in der Anker.

    <a class="hoverMenu">
  MenuText
  <div class="subMenu">
    SubMenuText
  </div>
</a>

.hoverMenu .subMenu { display: none; }
.hoverMenu:Hover .subMenu { display: block; }

    Ich noch nicht getestet für den IE6, aber das ist die Grundidee hinter dem ganzen css-Menü in jedem anderen browser. Nicht sicher, ob man nest Anker oder nicht.

    • nicht gültig, Sie können nicht einen div innerhalb einer a tag.
    • Nein, es funktioniert nicht in ie6 jsbin.com/uyima
    • ohh gut, lustig genug, wenn Ihre Verbindung funktioniert Super in chrome.
    InformationsquelleAutor Nick Larsen
  3. 0

    Versuchen ie7-js.

    Javascript ist absolut nicht eine option, können Sie eines der vielen Beispiele von nur CSS dropdown-Menüs, wie Der ULTIMATE CSS drop-down-Menü von Stu Nicholls.

    Meiner Meinung nach, macht der IE6 Verhalten sich alle rund um die via js ist vorzuziehen, css-hacks, die umgesetzt werden müssen, für jedes feature fehlt.

    • Ich will nicht, javascript zu verwenden
    • Warum vermeidest du javascript?
    • wenn ich Menü ohne javascript, dann würde ich für ihn gehen
    • Haben Sie untersucht, jede der CSS-Optionen gibt, wie die, die ich im Zusammenhang mit oben?
    InformationsquelleAutor jball
Schreibe einen Kommentar