自制纯css下拉导航

自己动手用纯css写了一个下拉导航，下面把代码呈上。主要用到了伪类，相对定位，绝对定位的知识。

<doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{margin:0px;}
#menu{ width:100%; height:31px; background-color:#c9c9a7;  position:relative;}
#menu ul {padding:0;
margin:0;
list-style-type: none;
}#menu ul li {float:left;
position:relative;
}
#menu ul li a ,#menu ul li a:visited {display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border-top: 1px solid #c9c9a7;
border-right:1px solid #fff;
border-width:1px 1px 0 0;/*上右下左*/
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
#menu ul li ul {display: none;
}#menu ul li:hover a {color:#fff;
background:#b3ab79;
}
#menu ul li:hover ul {display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}#menu ul li:hover ul li a {display:block;
background:#faeec7;
color:#000;
width:204px;/*控制下拉框的宽度*/
}
/* style the background and forground colors of the links on hover */
#menu ul li:hover ul li a:hover {background:#dfc184;
color:#000;
}</style>
</head>
<body><div id="menu"><ul><li><a href="">菜单一</a><ul><li><a href="">子菜单1</a></li><li><a href="">子菜单3</a></li></ul></li><li><a href="">菜单二</a><ul><li><a href="">子菜单4</a></li><li><a href="">子菜单5</a></li><li><a href="">子菜单6</a></li></ul></li><li><a href="">菜单三</a><ul><li><a href="">子菜单4</a></li><li><a href="">子菜单5</a></li><li><a href="">子菜单6</a></li></ul></li></ul></div>
</body>
</html>

转载于:https://www.cnblogs.com/xiaogou/p/5055075.html

自制纯css下拉导航相关推荐

html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
兼容FF,IE的纯CSS下拉菜单
代码简介:作者的CSS水平不错啊,值得我们学习,少了JS,就是好看多. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
html京东下拉菜单设置,div css下拉导航菜单（图+演示）
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
用 :focus-within 实现纯 CSS 下拉框组件
:focus-within 伪类:当本节点或其子节点获得焦点时被激活. 借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 当点击表单中的文本框时需高亮整个表单元素.但 ...
js读取div从html中导入,在html中div+css布局的简单应用...-js+div+css下拉导航菜单完整代...-CSS文件的条件导入 - Gene Li_169IT.COM...
方案一: 在HTML文档中使用条件导入,如在HEAD中插入如下代码: 1: 4: .csharpcode, .csharpcode pre{font-size: small;color: black; ...
纯css 下滑线导航条特效
html:部分 <nav class="navigation"><div class="wrapper"> <ul class=& ...
HTML下拉菜单改变颜色,CSS下拉菜单中字体颜色问题
纯CSS下拉菜单演示 *{margin:0;padding:0;} ul{list-style-type:none;} a{text-decoration:none; color:#666; font ...
Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...

自制纯css下拉导航

自制纯css下拉导航相关推荐

最新文章

热门文章