亚洲视频中文字幕更新,久久精品国产亚洲AV无码娇色 ,久久亚洲欧美国产综合aⅴ

技術(shù)頻道 - html技術(shù)

常見的簡單大方的純CSS3水平下拉導(dǎo)航菜單

作者:admin 時間:2023-5-10 7:59:52 瀏覽:

本文介紹一款常見的簡單大方的CSS3下拉導(dǎo)航菜單，代碼量少，制作簡單，但是非常實用，適合各種風(fēng)格的網(wǎng)頁使用，簡直是百搭導(dǎo)航。

效果圖

常見的簡單大方的CSS3水平下拉導(dǎo)航菜單

demo download

示例介紹

該示例用HTML5+CSS3實現(xiàn)，無JavaScript。

導(dǎo)航菜單布局為水平方向，背景為藍(lán)色。
鼠標(biāo)移到菜單上時，菜單背景顏色漸變?yōu)楹谏?/li>
菜單若有二級菜單，則下拉展示。
鼠標(biāo)移到二級菜單上時，其背景顏色會漸變?yōu)榱硪粋€顏色。

注意，該示例非響應(yīng)式導(dǎo)航。

HTML代碼

<nav class="dropdownmenu">
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">關(guān)于我們</a></li>
    <li><a href="#">技術(shù)教程</a>
      <ul id="submenu">
        <li><a href="#">SVG</a></li>
        <li><a href="#">HTML5</a></li>
        <li><a href="#">jQuery</a></li>
      </ul>
    </li>
    <li><a href="#">最新消息</a></li>
    <li><a href="#">聯(lián)系我們</a></li>
  </ul>
</nav>

外層標(biāo)簽為<nav></nav>，其class屬性值為dropdownmenu，里面是一個ul容器，li列舉是菜單內(nèi)容。li里面包含的ul容器和li列舉，這是該菜單的二級菜單，二級菜單的ul容器的id值為submenu。

CSS代碼

.dropdownmenu ul, .dropdownmenu li {
  margin: 0;
  padding: 0;
}

.dropdownmenu ul {
  background: gray;
  list-style: none;
  width: 100%;
}

.dropdownmenu li {
  float: left;
  position: relative;
  width: auto;
}

.dropdownmenu a {
  background: #30A6E6;
  color: #FFFFFF;
  display: block;
  font: bold 12px/20px sans-serif;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.dropdownmenu li:hover a {
  background: #000000;
}

#submenu {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 35px;
  visibility: hidden;
  z-index: 1;
}

li:hover ul#submenu {
  opacity: 1;
  top: 40px;
  visibility: visible;
}

#submenu li {
  float: none;
  width: 100%;
}

#submenu a:hover {
  background: #DF4B05;
}

#submenu a {
  background-color: #000000;
}