Html 制作菜单和子菜单。需要帮助将子菜单编码到下拉菜单中吗
我想要的是,当你将鼠标悬停在“视频”上时,会出现子菜单 我已经编写了Html 制作菜单和子菜单。需要帮助将子菜单编码到下拉菜单中吗,html,css,menu,submenu,Html,Css,Menu,Submenu,我想要的是,当你将鼠标悬停在“视频”上时,会出现子菜单 我已经编写了.sub{display:block;}这会使子菜单消失,但当您将鼠标悬停在“videos”上时,它不会出现 请帮忙,谢谢你 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css
.sub{display:block;}
这会使子菜单消失,但当您将鼠标悬停在“videos”上时,它不会出现
请帮忙,谢谢你
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="videos.css" />
<link rel="stylesheet" type="text/css" href="vines.css" />
<title>Puppy Power</title>
</head>
<body>
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a>
<ul class="sub">
<li><a href="vines.html">Vines</a></li>
<li><a href="#">Pugs</a></li>
<li><a href="#">Failing Dogs</a></li>
<li><a href="#">Crazy Dogs</a></li>
<li><a href="#">Funny Dogs</a></li>
</ul>
</li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="hero"><h1><b>HERO</b></h1></div>
<div id="topvideo"><h1><b>TOP VIDEO</b></h1></div>
<div id="topphoto"><h1><b>TOP PHOTO</b></h1></div>
<div id="toparticles"><h1><b>TOP ARTICLE</b></h1></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>FOOTER</b></h1></div>
</body>
</html>
#page {
max-width: 850px;
min-width: 840px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
}
#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
float: left;
list-style-type: none;
top: 159px;
left: 80px;
}
#navigation , .sub {
list-style-type: none;
}
.sub {
display: none;
}
.sub li {
top: 100px;
}
#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
float: left;
list-style-type: none;
}
#navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
#navigation li:hover > a {
background-color: #89cFF0;
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 0px 0px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 0px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 0px;
text-align: center;
}
幼犬力量
-
英雄
顶级视频
头像
头条
内容
页脚
#页面{
最大宽度:850px;
最小宽度:840px;
最小高度:1550px;
最大高度:1600px;
}
* {
边际:0px;
填充:0px;
}
#航行{
边框:1px实心#89cFF0;
宽度:813px;
高度:187px;
左边距:5px;
}
#导航李{
边框:1px实心#89cFF0;
宽度:125px;
文本对齐:居中;
浮动:左;
列表样式类型:无;
顶部:159px;
左:80px;
}
#导航,.sub{
列表样式类型:无;
}
.sub{
显示:无;
}
苏丽先生{
顶部:100px;
}
#导航李{
边框:1px实心#89cFF0;
宽度:125px;
文本对齐:居中;
浮动:左;
列表样式类型:无;
}
#导航a{
文字装饰:无;
显示:块;
宽度:125px;
高度:25px;
线高:25px;
边框:1px实心#89cFF0;
}
#导航li:悬停>a{
背景色:#89cFF0;
}
#英雄{
宽度:813px;
高度:408px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
显示:内联块;
保证金:5px0px 0px 0px;
文本对齐:居中;
颜色:红色;
}
#热门视频{
宽度:267px;
高度:370px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
显示:内联块;
垂直对齐:顶部;
文本对齐:居中;
保证金:5px0px 5px0px;
}
#托普霍托{
宽度:267px;
高度:370px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
显示:内联块;
垂直对齐:顶部;
文本对齐:居中;
保证金:5px0px 5px0px;
}
#主题文章{
宽度:267px;
高度:370px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
显示:内联块;
垂直对齐:顶部;
文本对齐:居中;
保证金:5px0px 5px0px;
}
#内容{
宽度:813px;
高度:310px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
保证金:0px 0px 0px 0px;
文本对齐:居中;
}
#页脚{
宽度:813px;
高度:100px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
保证金:5px0px 0px 0px;
文本对齐:居中;
}
标准父级-子级和父级>子级之间的区别在于后者
将仅选择直接子项
来源
将此添加到css中
#navigation li:hover > ul.sub{
display: block
}
范例精彩绝伦。非常感谢你。另外,当我在.sub-li{absolute;top:100px;}中编码时,我还可以问一下,它不会移动子菜单,因为我需要将子菜单直接放在1PX实心框中..sub-li父项(.sub)必须是位置:relative