码迷,mamicode.com
首页 > Web开发 > 详细

简单的HTML下拉框

时间:2021-03-30 13:45:09      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:utf-8   float   size   charset   title   css   splay   国外   line   

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />

5 <title></title>

6 <style type="text/css">

7

8 .list1 {

9 float:left;

10 list-style: none;

11 /*border: 1px solid black;*/

12 width: 180px;

13 height: 60px;

14 line-height: 60px;

15 font-size: 28px;

16 text-align: center;

17 border:1px #F00 dashed;

18 }

19 .list2{

20 list-style: none;

21 /*border: 2px solid blue;*/

22 border-bottom: 1px solid black;

23 position: relative;

24 left: 60px;

25 display: none;

26 }

27 .list1:hover .list2{

28 display: block;

29 }

30 .nav{

31 text-align: center;

32 }

33 </style>

34 </head>

35 <body>

36 <div class="nav">

37 <ul>

38 <li class="list1">

39 新闻

40 <ul>

41 <li class="list2">国内新闻</li>

42 <li class="list2">国外新闻</li>

43 <li class="list2">地方新闻</li>

44 </ul>

45</li>

46 </ul>

47 <ul>

48 <li class="list1">

49 娱乐

50 <ul>

51 <li class="list2">娱乐新闻</li>

52 <li class="list2">国外新闻</li>

53 <li class="list2">地方新闻</li>

54 </ul>

55 </li>

56 </ul>

57 <ul>

58 <li class="list1">

59 贴吧

60 <ul>

61 <li class="list2">贴吧新闻</li>

62 <li class="list2">国外新闻</li>

63 <li class="list2">地方新闻</li>

64 </ul>

65 </li>

66 </ul>

67 <ul>

68 <li class="list1">

69 北欧

70 <ul>

71 <li class="list2">北欧新闻</li>

72 <li class="list2">国外新闻</li>

73 <li class="list2">地方新闻</li>

74 </ul>

75 </li>

76 </ul>

77 <ul>

78 <li class="list1">

79 中国

80 <ul>

81 <li class="list2">中国新闻</li>

82 <li class="list2">国外新闻</li>

83 <li class="list2">地方新闻</li>

84 </ul>

85 </li>

86 </ul>

87 </div>

88 </body>

89 </html>

简单的HTML下拉框

标签:utf-8   float   size   charset   title   css   splay   国外   line   

原文地址:https://www.cnblogs.com/hixkk/p/14592776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!