Heim > Artikel > Web-Frontend > Klicken Sie zum Implementieren des CSS-Codes auf das Menü, um es nach rechts zu erweitern und den Inhalt anzuzeigen

Klicken Sie zum Implementieren des CSS-Codes auf das Menü, um es nach rechts zu erweitern und den Inhalt anzuzeigen

不言Original: 2018-08-20 10:55:212720Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem CSS-Code zum Erweitern des Menüs nach rechts, um den Inhalt anzuzeigen. Ich hoffe, dass er für Sie hilfreich ist .

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css多级菜单向右展开</title>
    <style>
        *{margin: 0 auto;padding: 0}
        .nav-wrapper{width: 100px;}
        .nav-wrapper ul a{font-family: &#39;微软雅黑&#39;;font-size: 14px;color: #333;text-decoration: none;}
        .nav-wrapper ul a:hover{color: #000;text-decoration: none;}
        .nav-wrapper ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;}
        .nav-wrapper ul li:hover{background: #c1c1c1;}
        .nav-wrapper ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;}
        .nav-wrapper .nav1{position: static !important;}
        .nav-wrapper ul.nav2{left: 99px;top: 0;display: none;}
        .nav-wrapper .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}
    </style>
</head>
<body>
<!--代码部分-->
<!--  欢迎来到大峡谷 -->
<div class="nav-wrapper">
    <ul class="nav1">
        <li class="li1"><a href="#">一成</a>
            <ul class="nav2">
                <li class="li2"><a href="#">轮子妈</a></li>
                <li class="li2"><a href="#">维克托</a></li>
            </ul>
        </li>
        <li class="li1"><a href="#">温bb</a>
            <ul class="nav2">
                <li class="li2"><a href="#">薇恩</a></li>
                <li class="li2"><a href="#">盲僧</a></li>
            </ul>
        </li>
        <li class="li1"><a href="#">天翔</a>
            <ul class="nav2">
                <li class="li2"><a href="#">鳄鱼</a></li>
                <li class="li2"><a href="#">小炮</a></li>
            </ul>
        </li>
        <li class="li1"><a href="#">顾研</a>
            <ul class="nav2">
                <li class="li1"><a href="#">火女</a></li>
                <li class="li1"><a href="#">石头人</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

Verwandte Empfehlungen:

CSS-Navigationsmenü, dreistufiger Menüimplementierungscode_Navigationsmenü

CSS-Hover-Dropdown menu _html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonKlicken Sie zum Implementieren des CSS-Codes auf das Menü, um es nach rechts zu erweitern und den Inhalt anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind die CSS-Layoutmodelle? Einführung in die drei Layoutmodelle von CSSNächster Artikel：Was sind die CSS-Layoutmodelle? Einführung in die drei Layoutmodelle von CSS

In Verbindung stehende Artikel

Mehr sehen