css 导航菜单

曾经终败给现在 2022-06-14 06:29 213阅读 0赞

body部分，创建一个外部大盒子，里面有一个存放logo的盒子，还有一个存放菜单的盒子

<body> <div id="top"> <div id="logo"><img src="images/22102.png" width="196" height="90" /></div> <div id="menu"> <ul> <li>网站首页</li> <li>宁静致远 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>关于我们 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>净心枕芯 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>在线订购</li> <li>人才招聘</li> <li>联系我们</li> </ul> </div> </div> </body>

css部分实现鼠标经过显示二级菜单

<style> *{ margin:0px; padding:0px; } #top{ width:950px; height:800px; margin:10px auto; } #logo{ width:196px; height:90px; float:left; } #menu{ width:700px; height:90px; float:right; margin-top:20px; } #menu ul li{ float:left; width:100px; line-height:50px; text-align:center; list-style:none; } #menu li:hover{ background:#066; } #menu ul li ul li{ background:#99C; height:35px; line-height:38px; } #menu ul li ul li:hover{ background:#0C0; } #menu ul li ul{ display:none; } #menu ul li:hover ul{ display:block; } #menu ul li ul{ } </style>

通过display可以设置组件的是否显示

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 (div+css特效代码) 导航菜单栏

图效果： ![Center][] Jsp代码： <%@ page language="java" import="java.util.*" pageEnco...

墨蓝/ 2024年04月17日 23:15/ 0 赞/ 34 阅读

相关 css基础 CSS 导航栏、CSS 下拉菜单

阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并

一时失言乱红尘/ 2023年10月06日 22:33/ 0 赞/ 11 阅读

相关 jquery导航菜单

{ margin: 0; padding: 0; } ul{ width: 800px;

末蓝、/ 2022年10月02日 09:54/ 0 赞/ 192 阅读

相关 h5+css 菜单导航---改变宽度

菜单导航—改变宽度 1、使用javascript脚本实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

Dear 丶/ 2022年09月23日 03:42/ 0 赞/ 148 阅读

相关 h5+css 垂直导航菜单

垂直导航菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

矫情吗；*/ 2022年09月23日 03:39/ 0 赞/ 169 阅读

相关实用js+css滑动门导航菜单

实用js+css滑动门导航菜单 <html> <head> <title>简易实用，滑动门</title> <meta http-equiv=

冷不防/ 2022年09月21日 15:27/ 0 赞/ 204 阅读

相关 css3 svg表单标题菜单导航

[下载地址][Link 1]使用css3和svg实现表单的标题导航菜单动画效果，菜单用图表标识，依次出现动画效果。 ![1630567269.png][] dd: [L

痛定思痛。/ 2022年09月10日 06:24/ 0 赞/ 105 阅读

相关 css 导航菜单

body部分，创建一个外部大盒子，里面有一个存放logo的盒子，还有一个存放菜单的盒子 <body> <div id="top"> <div id="logo"><i

曾经终败给现在/ 2022年06月14日 06:29/ 0 赞/ 214 阅读

相关 CSS之——设置列表样式和创建导航菜单

一、设置列表的符号 > list-style-type: 属性；//设置列表样式 > > list-style-type: none; //清楚样式 > > 属性有

港控/mmm°/ 2022年05月19日 09:59/ 0 赞/ 202 阅读

相关使用CSS3创建多级导航菜单

index.html <!DOCTYPE html> <html lang="en" > <head> <met

川长思鸟来/ 2022年03月20日 02:14/ 0 赞/ 193 阅读