CSS3橫向導航下拉菜單特效代碼下載



如需定制開發(網站開發、二次開發)在線咨詢,請點擊>> QQ:753511799

5 17 6



特效描述:橫向導航 下拉菜單。CSS3橫向導航下拉菜單代碼是一款紅色樣式風格的網站導航,鼠標經過的時候下拉顯示二級菜單。

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/helang.css">
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

2. HTML代碼

<nav class="hl_nav">
    <ul class="nav_list">
        <li class="highlight active">
            <a class="nav_head" href="javascipt:;">
                <i class="icon fa fa-home"></i>
                <span>網站首頁</span>
            </a>
            <a href="javascipt:;" class="item">二級導航1</a>
            <a href="javascipt:;" class="item">二級導航2</a>
            <a href="javascipt:;" class="item">二級導航3</a>
            <a href="javascipt:;" class="item">二級導航4</a>
            <a href="javascipt:;" class="item">二級導航4</a>
        </li>
        <li class="highlight">
            <a class="nav_head" href="javascipt:;">
                <i class="icon fa fa-cloud-download"></i>
                <span>在線下載</span>
            </a>
            <a href="javascipt:;" class="item">二級導航1</a>
            <a href="javascipt:;" class="item">二級導航2</a>
            <a href="javascipt:;" class="item">二級導航3</a>
        </li>
        <li class="highlight">
            <a class="nav_head" href="javascipt:;">
                <i class="icon fa fa-diamond"></i>
                <span>成功案例</span>
            </a>
            <a href="javascipt:;" class="item">二級導航1</a>
            <a href="javascipt:;" class="item">二級導航2</a>
            <a href="javascipt:;" class="item">二級導航3</a>
            <a href="javascipt:;" class="item">二級導航4</a>
            <a href="javascipt:;" class="item">二級導航4</a>
        </li>
        <li class="highlight">
            <a class="nav_head" href="javascipt:;">
                <i class="icon fa fa-list-alt"></i>
                <span>新聞動態</span>
            </a>
            <a href="javascipt:;" class="item">二級導航1</a>
            <a href="javascipt:;" class="item">二級導航2</a>
            <a href="javascipt:;" class="item">二級導航3</a>
        </li>
        <li class="highlight">
            <a class="nav_head" href="javascipt:;">
                <i class="icon fa fa-comments"></i>
                <span>與我聯系</span>
            </a>
            <a href="javascipt:;" class="item">二級導航1</a>
            <a href="javascipt:;" class="item">二級導航2</a>
        </li>
        <li>
            <a class="nav_head" href="javascipt:;">
                <i class="icon fa fa-user"></i>
                <span>關于我們</span>
            </a>
        </li>
        <li class="right highlight">
            <a class="nav_head" href="javascipt:;">
                <i class="icon fa fa-cog "></i>
                <span>個人中心</span>
            </a>
            <a href="javascipt:;" class="item">修改資料</a>
            <a href="javascipt:;" class="item">在線充值</a>
            <a href="javascipt:;" class="item">升級會員</a>
            <a href="javascipt:;" class="item">安全設置</a>
            <a href="javascipt:;" class="item">退出帳號</a>
        </li>
    </ul>
    <div class="shade"></div>
</nav>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 收縮導航菜單 二級導航菜單 文字收縮展開 下拉導航菜單 圖片收縮展開 豎直導航菜單 圖標導航菜單 固定導航菜單 側邊導航菜單 樹形導航菜單 網址導航菜單 導航菜單插件 文字導航菜單 滾動導航菜單 滑動導航菜單 浮動導航菜單 導航切換 右鍵菜單 收縮導航菜單 html5動畫導航菜單 flash導航菜單 收縮收起展開 導航菜單導航條
?
×
×
51前端

注冊

×
綁定手機

請綁定手機號,在繼續操作

×
單次下載支付

應付金額:279

支付完成后,回到下載頁面,在進行下載

官方QQ群
意見反饋
qq群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

林肯娱乐怎么赚钱 黑龙江十一选五开奖结果爱彩乐 辽宁体彩十一选五前三走势图 同花顺e配资 期期公开一码两码中特 海南4+1开奖官网 江西多乐彩11选五走势图江西11选5前三组选 12bet在线娱乐百家乐 私募分级基金配资 正规理财平台排名 河南快三走势图