HTML5-网页标栏的下拉菜单

/*
*Copyright (c) 2017，烟台大学计算机学院
All rights reserved.
*文件名称：关于HTML的练习
*作    者：张晴晴
*完成日期：201711月5日
*版 本 号：v1.0  *
*问题描述：HTML5的新特性
*输入描述： 无
*程序输出： 无
*/<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页横栏-下拉列表</title>
<style>
body{
font-size:16px;
font-family:"仿宋";/*body里面设置字体*/
}
#nav{
line-height:40px;
list-style-type:none;
padding:0px;
width:100%;
}
#nav ul{
line-height:40px;
position:absolute;
left:-100000px;
padding:0px;/*定义元素边框和元素内容之间的距离*/
}
#nav li{
float:left;
/*display:inline;*//*使之在一行上显示*/
background-color:red;
width:100px;
}
#nav a{
padding:10px 30px;/*一层网络连接的相对位置*/
color:yellow;/*链接本来的颜色*/
text-decoration:none;
}
#nav a:hover{/*hover设置鼠标移动到a上面时的样式*/
color:white;/*鼠标指向链接显示的颜色*/
background-color:blue;/*鼠标指示背景显示颜色*/
list-style-type:none;
}
#nav li:hover ul{/*指定下拉列表出现的位置*/
left:auto;   /*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。*/
}

 #nav ul li{/*下拉子菜单中所有内容*/
background-color:green;
list-style-type:none;
clear:left;/*规定哪一侧不允许浮动元素*/
}
#nav ul a{/*二层下拉列表中的样式*/
text-decoration:none;
padding:5px;
color:black;}/*链接本来的颜色*/
</style>
</head>

<body>

<ul id="nav">
<li><a href="">c++</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>

    <li> <a href="">java</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
<li> <a href="">c</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
<li>  <a href="">c#</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
<li>  <a href="">html</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
<li><a href="">ar</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
</ul>

</body>
</html>

运行结果：

HTML5-网页标栏的下拉菜单相关推荐

vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
【HTML+CSS】实现网页的导航栏和下拉菜单
熟练的使用导航栏,对于任何网站都非常重要,我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单.同时,我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果. 水平导航栏: 垂直导航栏 ...
HTML+CSS实现导航栏二级下拉菜单图书案例
一.效果图二.内容.要求学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分法)进行分门别类,其中上面括号中的类别为 ...
CSS导航栏及下拉菜单
导航栏对于一个网站来说非常重要,熟练地使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单.导航栏基本上是一个链接列表,所以使用 <ul></ul>和 <li> ...
抗疫逆行者网页作业感动人物网页代码成品网页作业带JS下拉菜单最美逆行者网页模板致敬疫情感动人物网页设计制作
大学生抗疫逆行者网页作业成品作品介绍作品技术效果预览网页下载作品介绍逆行者感动人物网页作品包含1个首页5个子页面,共计6个页面,作品采用大学生基础水平制作. 作品技术主要知识点应用:JS ...
WEB前端网页设计-Bootstrap 按钮下拉菜单
目录 Bootstrap 按钮下拉菜单分割的按钮下拉菜单按钮下拉菜单的大小按钮上拉菜单 Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...
CSS样式：小米商城导航栏及下拉菜单小项目
小米商城一.Html网页二.CSS美化样式三.成果图一.Html网页 <!DOCTYPE html> <html lang="en"><hea ...
解决鼠标移动导航栏，下拉菜单就会消失的问题
这个太坑了特此写一篇博客记录 $(".product_guid").mouseover(function(){ $(".first_guid") ...

HTML5-网页标栏的下拉菜单

HTML5-网页标栏的下拉菜单相关推荐

最新文章

热门文章