HTML5-网页标栏的下拉菜单

最新推荐文章于 2023-06-12 15:56:42 发布

讨厌一个人不需要理由

最新推荐文章于 2023-06-12 15:56:42 发布

阅读量1.1w

点赞数 4

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_34216631/article/details/78449505

版权

HTML 专栏收录该内容

37 篇文章 3 订阅

订阅专栏

/* 
*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>