css怎样圆满实现一个水平排列的菜单效果?

发布时间：2023-07-24 13:54:01 所属栏目：语言来源：

导读： 今天给大家分享的是关于css怎样实现水平排列菜单的内容，水平菜单比较常见，很多网站都会设计和使用水平菜单，下文介绍的是用CSS3写的简单的水平菜单效果，对新手学习和了解CSS3制作网页特效有一定的帮助，感兴趣的

今天给大家分享的是关于css怎样实现水平排列菜单的内容，水平菜单比较常见，很多网站都会设计和使用水平菜单，下文介绍的是用CSS3写的简单的水平菜单效果，对新手学习和了解CSS3制作网页特效有一定的帮助，感兴趣的朋友接下来跟随小编一起看看吧。

    实现代码

    html

<nav class="dropdownmenu">

  <ul>

    <li><a href="http://www.jochaho.com/wordpress/">脚本之家</a></li>

    <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">jb51</a></li>

    <li><a href="#">Articles on HTML5 & CSS3</a>

      <ul id="submenu">

        <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li>

        <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li>

        <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li>

      </ul>

    </li>

    <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li>

    <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li>

  </ul>

</nav>

    CSS3

.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; /* adjust this as per top nav padding top & bottom comes */

visibility: visible;

}

#submenu li {

float: none;

width: 100%;

}

#submenu a:hover {

background: #DF4B05;

}

#submenu a {

background-color:#000000;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!