css3+html5で垂直メニューを実装する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3+html5で垂直メニューを実装する方法

jacklove

Jun 11, 2018 pm 05:16 PM

えっと…かなり見苦しいです…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横向菜单</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .wrap{
            width: 600px;
            margin: 0 auto;
        }
        a{
            text-decoration: none;
        }
        .menu{
            width: 90px;
            background: greenyellow;
            margin: 5px auto;
            position: relative;
            text-align: center;
            transition-duration: 0.5s;/*颜色转变时间*/
            /*float: left;*/
        }
        .menu:hover{
            background: pink;
            transition-duration: 0.5s;
        }
        .menu ul{
            width: 90px;
            display: none;
            background: aqua;
            position: absolute;
            top:0px;
            left:90px;
            border: 1px solid cornflowerblue;
        }
        .menu ul li{
            list-style-type: none;
        }
        .menu ul li a {
            display: block;
            padding: 5px 10px;
            border-bottom: 1px solid transparent;
        }
        .menu ul li a:hover{
            background: yellow;
            border-bottom: 1px solid cornflowerblue;
        }
        .menu:hover .select_app{
            display: block;
            transition-duration: 0.5s;
        }
    </style>
</head>
<body>
<p class="wrap">
    <p class="menu">
        <a href="#" class="app">应用</a>
        <ul class="select_app">
            <li><a href="#">聊天应用</a></li>
            <li><a href="#">游戏应用</a></li>
            <li><a href="#">天气应用</a></li>
            <li><a href="#">其他应用</a></li>
            <li><a href="#">聊天应用</a></li>

        </ul>
    </p>
    <p class="menu">
        <a href="#" class="app">应用</a>
        <ul class="select_app">
            <li><a href="#">聊天应用</a></li>
            <li><a href="#">游戏应用</a></li>
            <li><a href="#">天气应用</a></li>
            <li><a href="#">其他应用</a></li>
            <li><a href="#">聊天应用</a></li>

        </ul>
    </p>
    <p class="menu">
        <a href="#" class="app">应用</a>
        <ul class="select_app">
            <li><a href="#">聊天应用</a></li>
            <li><a href="#">游戏应用</a></li>
            <li><a href="#">天气应用</a></li>
            <li><a href="#">其他应用</a></li>
            <li><a href="#">聊天应用</a></li>

        </ul>
    </p>
    <p class="menu">
        <a href="#" class="app">应用</a>
        <ul class="select_app">
            <li><a href="#">聊天应用</a></li>
            <li><a href="#">游戏应用</a></li>
            <li><a href="#">天气应用</a></li>
            <li><a href="#">其他应用</a></li>
            <li><a href="#">聊天应用</a></li>

        </ul>
    </p>
</p>
</body>
</html>

この記事では、css3 + html5 を使用して垂直メニューを実装する方法について説明します。関連コンテンツの詳細については、php 中国語の Web サイトを参照してください。

関連する推奨事項:

HTML5ローカルストレージに関する関連説明

PHP Captcha検証コードクラスに関する説明

MySQL情報スキーマ関連コンテンツ

以上がcss3+html5で垂直メニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

cohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。