html简单实现下拉菜单

主要用到的知识ul和li标签

ul li 是一个组合：是无序列表标签，在实际中用的非常多，与之对应的是有序列表：ol lili是不能单独使用，必须在于ul之中的ul是块级元素，能直接定义宽高，而li是行级元素，不能直接定义高

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"> <title>下拉框</title> <style type="text/css">* {margin: 0px;padding: 0px; }

#nav {width: 600px;height: 40px;margin: 0 auto; }

#nav ul {list-style: none; }

#nav ul li {float: left;line-height: 40px;text-align: center;position: relative; }

#nav ul li a {text-decoration: none;color: #000;display: block;padding: 0px 10px; }

#nav ul li a:hover {color: #FFF;background: #333 }

#nav ul li ul {position: absolute;display: none; }

#nav ul li ul li {float: none;line-height: 30px;text-align: left; }

#nav ul li ul li a {width: 100%; }

#nav ul li ul li a:hover {background-color: #06f; }

#nav ul li:hover ul {display: block } </style></head><body><div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">学习中心</a> <ul> <li><a href="#">Oracle</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">Python</a></li> <li><a href="#">mongodb</a></li> <li><a href="#">redis</a></li> </ul> </li> <li><a href="#">个人中心</a></li> <li><a href="#">关于我们</a></li> </ul></div>

</body></html>

转载于:https://www.cnblogs.com/manger/p/7238142.html

html简单实现下拉菜单相关推荐

jquery实现简单的下拉菜单
本文用简单的几行jquery代码实现简单的下拉菜单效果看效果 html <ul><li>主题市场<ul><li>运动派<ul><li ...
简单jquery下拉菜单流畅版
时间总是不轻易间的溜走,想做的事情还有好多,回想起来还有好多没实现,纠结,头大. 本来说好昨天写的,忙公司项目琐事,耽误了,都过凌点,想写点什么,一下子又不晓得该写什么好. 还是继续整点jquery实 ...
js实现简单的下拉菜单列表
下拉菜单效果图: 基本代码如下: <!DOCTYPE html> <html><head><meta charset=</
利用JavaScript实现简单的下拉菜单
最近几日,突然对Javascript非常兴趣,就想用Javascript实现几个经常都实现的特效,虽然对于javascript一直能够做一些开发,但还是使用很少. 首先我想实现的就是一个下拉样式的树, ...
html下拉菜单图片,JS+CSS 制作的超级简单的下拉菜单附图
先看效果: 代码: Good Test function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = ...
基于thinkphp5的简单的下拉菜单二级联动
话不多说,上代码模板: <select name="course_class" class="level1"><option value=& ...
jQuery做简单的下拉菜单
效果: css 代码 <style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none ...
使用js实现简单的下拉菜单
全部代码如下,详细注释已在代码注释中. <!DOCTYPE html> <html lang="en"><head><meta chars ...
html简单下拉菜单
菜单的功能多种多样,这里提供给一个简单的下拉菜单的参考. 具体代码如下: html: <!DOCTYPE html> <html> <head lang="en ...
html+css简单下拉菜单制作
额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果: 代码: <!DOCTYPE html> <html> <head><title& ...

html简单实现下拉菜单

html简单实现下拉菜单相关推荐

最新文章

热门文章