html+css，想在more details标签下面加一个导航栏下拉栏（hobby，subject 和experience）要怎么改啊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>This is about me</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body {
margin: 0;
padding: 0;
background: url("picture/background.jpg") no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<ul class="l">
<a href="Introduction.html"><li>Home Page</li></a>
<a href="Details.html"><li>More details</li></a>
<ul>
<li><a href="#">hobby</a></li>
<li><a href="#">subject</a></li>
<li><a href="#">experience</a></li>
</ul>
<a href="ly.html"><li>Want to chat?</li></a>
</ul>
</div>
<div class="mid">
<div class="left l">
<p class="metitle">Me</p>
<div class="me">
<img src="picture/me.jpg" alt="">
<p class="informationtitle">Basic information</p>
<p><b>Name：</b>XXX</p>
<p><b>Phone Number：</b>1??****???6</p>
<p><b>Email：</b>xxxxxxxxxx@qq.com</p>
<p><b>Habit：</b>Music</p>
</div>
</div>
<div class="book">
<img src="picture/book.jpg" alt="">
</div>
<div class="right l">
<p class="introductiontitle">Introduction</p>
<div class="wz">
<p>待补充</p>
</div>
</div>
</div>
<div class="foot">xxx</div>
</div>
</body>
</html>
@charset "utf-8";
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
.l{
float: left;
}
.r{
float: right;
}
.page{
width: 1600px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.272);
overflow: hidden;
}
.nav{
width: 100%;
background-color: #f97c0084;
overflow: hidden;
}
.nav ul{
width: 720px;
overflow: hidden;
margin: 5px 10px 5px 0;
}
.nav ul li{
width: 120px;
text-align: center;
position: relative;
line-height: 50px;
font-size: 14px;
color: rgb(255, 255, 255);
float: left;
}
.nav ul li:hover{
background-color: #f97c004c;
}
.nav ul li:hover ul {
display: block;
}
.mid{
width: 100%;
box-sizing: border-box;
padding: 20px;
overflow: hidden;
}
.banner{
width: 100%;
height: 750px;
overflow: hidden;
margin-bottom: 15px;
}
.detailsbanner{
width: 100%;
height: 400px;
overflow: hidden;
margin-bottom: 10px;
}
.banner img{
width: 100%;
height: 100%;
object-fit: cover;
}
.left{
width: 300px;
margin-right: 40px;
}
.right{
width: 1220px;
}
.metitle{
width: 100%;
line-height: 40px;
text-indent: 3.5em;
background-color: #f9bb0078;
color: rgb(255, 255, 255);
font-size: 36px;
margin-bottom: 20px;
}
.informationtitle{
width: 100%;
line-height: 40px;
text-indent: 1em;
background-color: #f9bb0078;
color: rgb(255, 255, 255);
font-size: 24px;
}
.introductiontitle{
width: 100%;
line-height: 40px;
text-indent: 12em;
background-color: #f9bb0078;
color: rgb(254, 254, 254);
font-size: 36px;
margin-bottom: 20px;
}
.jj{
width: 260px;
margin: 0 auto 20px;
}
.me img{
display: block;
width: 240px;
height: 240px;
box-sizing: border-box;
border-radius: 1/2;
border: 2px solid #f9bb0078;
margin: 0 auto 20px;
}
.dp img{
display: block;
width: 240px;
height: 400px;
box-sizing: border-box;
border-radius: 1/2;
border: 2px solid #f9bb0078;
margin: 0 auto 20px;
}
.book img{
display: block;
width: 1200px;
height: 300px;
box-sizing: border-box;
border-radius: 1/2;
margin: 0 auto 20px;
}
.jj p{
line-height: 26px;
margin-bottom: 5px;
}
.foot{
width: 100%;
background-color: #f97c0084;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #FFF;
}
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>This is about me</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body {
margin: 0;
padding: 0;
background: url("picture/background.jpg") no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<ul>
<li>
<a href="Introduction.html"><span>Home Page</span></a>
</li>
<li class="detail-wrapper">
<a href="Details.html">
<span>More details</span>
<ul class="more-details">
<li><a href="#">hobby</a></li>
<li><a href="#">subject</a></li>
<li><a href="#">experience</a></li>
</ul>
</a>
</li>
<li><a href="ly.html"><span>Want to chat?</span></a></li>
</ul>
</div>
<div class="mid">
<div class="left l">
<p class="metitle">Me</p>
<div class="me">
<img src="picture/me.jpg" alt="">
<p class="informationtitle">Basic information</p>
<p><b>Name：</b>XXX</p>
<p><b>Phone Number：</b>1??****???6</p>
<p><b>Email：</b>xxxxxxxxxx@qq.com</p>
<p><b>Habit：</b>Music</p>
</div>
</div>
<div class="book">
<img src="picture/book.jpg" alt="">
</div>
<div class="right l">
<p class="introductiontitle">Introduction</p>
<div class="wz">
<p>待补充</p>
</div>
</div>
</div>
<div class="foot">xxx</div>
</div>
</body>
</html>
```css
@charset "utf-8";
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
.l{
float: left;
}
.r{
float: right;
}
.page{
width: 1600px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.272);
/* overflow: hidden; */
}
.nav{
width: 100%;
background-color: #f97c0084;
/* overflow: hidden; */
}
.nav ul{
width: 720px;
/* overflow: hidden; */
margin: 5px 10px 5px 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 50px;
}
.nav ul li{
width: 120px;
text-align: center;
position: relative;
line-height: 50px;
font-size: 14px;
color: rgb(255, 255, 255);
/* float: left; */
}
.nav ul li:hover{
background-color: #f97c004c;
}
.nav ul li:hover ul {
display: block;
}
.mid{
width: 100%;
box-sizing: border-box;
padding: 20px;
overflow: hidden;
}
.banner{
width: 100%;
height: 750px;
overflow: hidden;
margin-bottom: 15px;
}
.detailsbanner{
width: 100%;
height: 400px;
overflow: hidden;
margin-bottom: 10px;
}
.banner img{
width: 100%;
height: 100%;
object-fit: cover;
}
.left{
width: 300px;
margin-right: 40px;
}
.right{
width: 1220px;
}
.metitle{
width: 100%;
line-height: 40px;
text-indent: 3.5em;
background-color: #f9bb0078;
color: rgb(255, 255, 255);
font-size: 36px;
margin-bottom: 20px;
}
.informationtitle{
width: 100%;
line-height: 40px;
text-indent: 1em;
background-color: #f9bb0078;
color: rgb(255, 255, 255);
font-size: 24px;
}
.introductiontitle{
width: 100%;
line-height: 40px;
text-indent: 12em;
background-color: #f9bb0078;
color: rgb(254, 254, 254);
font-size: 36px;
margin-bottom: 20px;
}
.jj{
width: 260px;
margin: 0 auto 20px;
}
.me img{
display: block;
width: 240px;
height: 240px;
box-sizing: border-box;
border-radius: 1/2;
border: 2px solid #f9bb0078;
margin: 0 auto 20px;
}
.dp img{
display: block;
width: 240px;
height: 400px;
box-sizing: border-box;
border-radius: 1/2;
border: 2px solid #f9bb0078;
margin: 0 auto 20px;
}
.book img{
display: block;
width: 1200px;
height: 300px;
box-sizing: border-box;
border-radius: 1/2;
margin: 0 auto 20px;
}
.jj p{
line-height: 26px;
margin-bottom: 5px;
}
.foot{
width: 100%;
background-color: #f97c0084;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #FFF;
}
.detail-wrapper {
position: relative;
overflow: hidden;
height: 50px;
}
.detail-wrapper:hover {
overflow: visible;
height: 200px;
background-color: rgba(249, 141, 0, 1);
}
.detail-wrapper .more-details {
/* position: absolute; */
display: flex;
flex-direction: column;
width: 120px;
}
我看下
没有素材，可以考虑一下hover显示菜单。
调整一下HTML结构
<div class="nav">
<ul class="l">
<a href="Introduction.html"><li>Home Page</li></a>
<a href="Details.html" >
<li id="down">More details
<ul id="moreUl">
<li><a href="#">hobby</a></li>
<li><a href="#">subject</a></li>
<li><a href="#">experience</a></li>
</ul>
</li>
</a>
<a href="ly.html"><li>Want to chat?</li></a>
</ul>
</div>
增加样式
#moreUl{
display: none;
}
#down:hover > #moreUl{
display: block;
}
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>This is about me</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body {
margin: 0;
padding: 0;
background: url("picture/background.jpg") no-repeat;
background-size: cover;
}
@charset "utf-8";
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
.l{
float: left;
}
.r{
float: right;
}
.page{
width: 1600px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.272);
overflow: hidden;
}
.nav{
width: 100%;
background-color: #f97c0084;
overflow: hidden;
}
.nav ul{
width: 720px;
overflow: hidden;
margin: 5px 10px 5px 0;
}
.nav ul li{
width: 120px;
text-align: center;
position: relative;
line-height: 50px;
font-size: 14px;
color: rgb(255, 255, 255);
float: left;
}
.nav ul li:hover{
background-color: #f97c004c;
}
.nav ul li:hover ul {
display: block;
}
.mid{
width: 100%;
box-sizing: border-box;
padding: 20px;
overflow: hidden;
}
.banner{
width: 100%;
height: 750px;
overflow: hidden;
margin-bottom: 15px;
}
.detailsbanner{
width: 100%;
height: 400px;
overflow: hidden;
margin-bottom: 10px;
}
.banner img{
width: 100%;
height: 100%;
object-fit: cover;
}
.left{
width: 300px;
margin-right: 40px;
}
.right{
width: 1220px;
}
.metitle{
width: 100%;
line-height: 40px;
text-indent: 3.5em;
background-color: #f9bb0078;
color: rgb(255, 255, 255);
font-size: 36px;
margin-bottom: 20px;
}
.informationtitle{
width: 100%;
line-height: 40px;
text-indent: 1em;
background-color: #f9bb0078;
color: rgb(255, 255, 255);
font-size: 24px;
}
.introductiontitle{
width: 100%;
line-height: 40px;
text-indent: 12em;
background-color: #f9bb0078;
color: rgb(254, 254, 254);
font-size: 36px;
margin-bottom: 20px;
}
.jj{
width: 260px;
margin: 0 auto 20px;
}
.me img{
display: block;
width: 240px;
height: 240px;
box-sizing: border-box;
border-radius: 1/2;
border: 2px solid #f9bb0078;
margin: 0 auto 20px;
}
.dp img{
display: block;
width: 240px;
height: 400px;
box-sizing: border-box;
border-radius: 1/2;
border: 2px solid #f9bb0078;
margin: 0 auto 20px;
}
.book img{
display: block;
width: 1200px;
height: 300px;
box-sizing: border-box;
border-radius: 1/2;
margin: 0 auto 20px;
}
.jj p{
line-height: 26px;
margin-bottom: 5px;
}
.foot{
width: 100%;
background-color: #f97c0084;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #FFF;
}
#moreUl{
display: none;
}
#down:hover > #moreUl{
display: block;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<ul class="l">
<a href="Introduction.html"><li>Home Page</li></a>
<a href="Details.html" >
<li id="down">More details
<ul id="moreUl">
<li><a href="#">hobby</a></li>
<li><a href="#">subject</a></li>
<li><a href="#">experience</a></li>
</ul>
</li>
</a>
<a href="ly.html"><li>Want to chat?</li></a>
</ul>
</div>
<div class="mid">
<div class="left l">
<p class="metitle">Me</p>
<div class="me">
<img src="picture/me.jpg" alt="">
<p class="informationtitle">Basic information</p>
<p><b>Name：</b>XXX</p>
<p><b>Phone Number：</b>1??****???6</p>
<p><b>Email：</b>xxxxxxxxxx@qq.com</p>
<p><b>Habit：</b>Music</p>
</div>
</div>
<div class="book">
<img src="picture/book.jpg" alt="">
</div>
<div class="right l">
<p class="introductiontitle">Introduction</p>
<div class="wz">
<p>待补充</p>
</div>
</div>
</div>
<div class="foot">xxx</div>
</div>
</body>
</html>