Html 我的菜单栏的下拉菜单不工作不显示下拉菜单
我创建了这个页面,但我的下拉菜单不起作用。我将鼠标悬停在下载页面上,它应该显示下拉链接1、链接2、链接3,但它没有显示。我的代码有什么问题,请提供任何帮助。下面是我的css和html代码。如果我想使用本地cdn,我该怎么做Html 我的菜单栏的下拉菜单不工作不显示下拉菜单,html,css,bootstrap-4,Html,Css,Bootstrap 4,我创建了这个页面,但我的下拉菜单不起作用。我将鼠标悬停在下载页面上,它应该显示下拉链接1、链接2、链接3,但它没有显示。我的代码有什么问题,请提供任何帮助。下面是我的css和html代码。如果我想使用本地cdn,我该怎么做 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</body>
</html>
身体{
字体系列:Arial、Helvetica、无衬线字体;
}
navbar先生{
溢出:隐藏;
背景色:#333;
}
纳瓦尔先生{
浮动:左;
字体大小:16px;
颜色:白色;
文本对齐:居中;
填充:14px 16px;
文字装饰:无;
}
.下拉列表{
浮动:左;
溢出:隐藏;
}
.下拉菜单{
字体大小:16px;
边界:无;
大纲:无;
颜色:白色;
填充:14px 16px;
背景色:继承;
字体家族:继承;
保证金:0;
}
.navbar a:悬停,.dropdown:悬停.dropbtn{
背景色:红色;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:#f9f9f9;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
.下拉内容a{
浮动:无;
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
文本对齐:左对齐;
}
.下拉列表内容a:悬停{
背景色:#ddd;
}
.下拉:悬停.下拉内容{
显示:块;
}
下拉列表
用这个,这是工作
正文{
字体系列:“Lucida Grande”,“Helvetica Neue”,Helvetica,Arial,无衬线;
填充:20px 50px 150px;
字体大小:13px;
文本对齐:居中;
背景:#E3CAA1;
}
保险商实验室{
文本对齐:左对齐;
显示:内联;
保证金:0;
填充:15px 4px 17px 0;
列表样式:无;
-webkit盒阴影:0.5pxRGBA(0,0,0,0.15);
-moz盒阴影:0.5pxrgba(0,0,0,0.15);
长方体阴影:0.5pxRGBA(0,0,0,0.15);
}
ulli{
字体:粗体12px/18px无衬线;
显示:内联块;
右边距:-4px;
位置:相对位置;
填充:15px 20px;
背景:#fff;
光标:指针;
-webkit转换:所有0.2秒;
-moz转换:全部为0.2s;
-ms转换:均为0.2s;
-o-过渡:均为0.2s;
过渡:均为0.2s;
}
ulli:悬停{
背景:#555;
颜色:#fff;
}
ul li ul{
填充:0;
位置:绝对位置;
顶部:48px;
左:0;
宽度:150px;
-webkit盒阴影:无;
-莫兹盒阴影:无;
盒影:无;
显示:无;
不透明度:0;
可见性:隐藏;
-webkit transiton:不透明度0.2s;
-moz转变:不透明度0.2s;
-ms转换:不透明度0.2s;
-o-转变:不透明度0.2s;
-过渡:不透明度0.2s;
}
李:最后一个孩子{
右:4px;
左:自动;
}
ulli ulli{
背景:#555;
显示:块;
颜色:#fff;
文本阴影:0-1px0#000;
}
ulli:悬停{
背景:#666;
}
ul-li:悬停ul{
显示:块;
不透明度:1;
能见度:可见;
}
- 家
- 关于
-
文件夹
- 网页设计
- 网络开发
- 插图
- 博客
- 接触
- 网页设计
- 网络开发
- 插图
如何增加字体大小。如果我在正文中更改字体大小,则会增加整个页面的字体。我想增加菜单字体大小。
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul>li:last-child ul {
right: 4px;
left: auto;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #666;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
</ul>