简单的HTML下拉框

2022-02-02 12:04:29

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下拉框

码农公寓

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 中国

11 /border: 1px solid black;/

21 /border: 2px solid blue;/