我对html和css很陌生，我的uni项目有一些问题。我想创建一个下拉菜单，它只在悬停时显示。我遵循了一个教程，并以同样的方式完成了它，然而，它对我不起作用…
另一件我真的不明白为什么会发生这种情况的事情是，我在导航栏(家庭、陶器、教程、商店(中的字体不是20像素，尽管我把它设置为20像素。每当我想把它设置成不同的字体(比如waaay更大(时，它都不会应用更大的字体。我做错了什么？：(
还有一件事！为什么我在第一段中的链接(入门、板块…(突然相邻？他们应该在彼此的下面。。。
这有很多问题，我知道。。谢谢你的任何帮助！
body, html {
width: auto;
overflow-y: scroll;
height: 2400px;
margin: auto;
padding: 0;
overflow-x: hidden;
}
body{
font-family: Baskerville, Helvetica, serif;
font-size: 20px;
text-align: center;
letter-spacing: .2em;
color: #A5A58D;
background-image: url(file:///Users/alinasprenger/Documents/FH%20St.%20Po%CC%88lten/Interaktive%20Medien/Images/Pottery%20Website%20Background%20Blurred-1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.header1{
height: 50px;
padding: 50px 0 5px 0;
font-size: 41px;
text-transform: uppercase;
}
.cf:before,
.cf:after{
content: "";
display: table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
nav{
background: #B7B7A4;
font-size: 20px;
height: 42px;
width: 100%;
}
ul, li{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
ul{
background: #B7B7A4;
height: 42px;
width: 100%;
}
li {
width: 25%;
position: relative;
}
li a{
display: block;
line-height: 42px;
padding: 0 1em;
color: #FFF1E6;
}
li a:hover, .category > li:hover > a{
background: #AEAE98;
height: 42px;
position: relative;
}
.current, a:hover.current{
background: #909072;
color: #FFF1E6;
position: relative;
height: 42px;
cursor: default;
}
ul.dropdown{
float: none;
background: #FFF1E6;
color: #B7B7A4;
width: auto;
height: auto;
position: relative;
left: -9000em;
z-index: 5;
padding-right: 0%;
}
ul.dropdown li{
float: none;
}
.category li:hover ul{
left: 0;
}
ul.dropdown li a{
color: #B7B7A4;
border-bottom: 1px solid #B7B7A4;
white-space: nowrap;
}
ul.dropdown li:last-child {
border-bottom: none;
}
ul.dropdown li a:hover{
background: #FFE8D6;
}
.header2{
display: flex;
height: 90px;
width: 100%;
padding: 20% 0 0 0;
align-items: center;
justify-content: center;
text-align: center;
font-size: 50px;
background-color: transparent;
color: #A5A58D;
flex-wrap: wrap;
position: fixed;
bottom: 20%;
}
.header3{
font-size: 41px;
display: flex;
align-items: center;
justify-content: center;
width: 485px;
height: 445px;
background-color: #A5A58D;
color: #EDDCD2;
flex-wrap: wrap;
position: fixed;
padding: 2em;
margin-left: 5em;
text-align: center;
top: 1544px;
left: 22%;
}
.textparagraphen1{
display: flex;
align-items: center;
justify-content: center;
width: 485px;
height: 445px;
background-color: #A5A58D;
color: #EDDCD2;
flex-wrap: wrap;
position: absolute;
z-index: 1;
padding: 15px;
top: 239px;
right: 53%;
font-size: 20px;
line-height: 23px;
}
a{
text-decoration: none;
font-size: 10px;
color: #EDDCD2;
}
.textparagraphen2{
display: flex;
align-items: center;
justify-content: center;
width: 485px;
height: 445px;
background-color: #A5A58D;
color: #EDDCD2;
flex-wrap: wrap;
position: absolute;
padding: 15px;
top: 999px;
left: 53%;
font-size: 20px;
line-height: 23px;
}
.textparagraphen3{
display: flex;
align-items: center;
justify-content: center;
width: 485px;
height: 445px;
background-color: #A5A58D;
color: #EDDCD2;
flex-wrap: wrap;
position: absolute;
padding: 15px;
top: 1544px;
right: 53%;
font-size: 20px;
line-height: 23px;
}
.textparagraphen4{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 68.4%;
height: 453px;
background-color: #A5A58D;
color: #EDDCD2;
flex-wrap: wrap;
padding: 15px;
margin: 0 15% 0 15%;
top: 255px;
position: absolute;
line-height: 23px;
}
.linksammlung{
float: none;
display: flex;
flex-direction: column;
align-items: center;
background: #A5A58D;
text-decoration: underline;
color: #EDDCD2;
font-size: 22px;
text-transform: uppercase;
font-weight: bold;
}
.abbildung1{
position: absolute;
left: 53%;
top: 239px;
}
.abbildung2{
position: absolute;
right: 53%;
top: 784px;
}
.abbildung3{
position: absolute;
left: 53%;
top: 1544px;
}
.abbildung5{
position: absolute;
right: 53%;
top: 1664px;
}
.abbildung6{
position: absolute;
left: 52.6%;
top: 1664px;
}
.tutorialvideo{
position: absolute;
text-align: center;
width: 100%;
height: 100%;
top: 808px;
}
.footerContainer {
top: 2322px;
position: absolute;
text-align: center;
width: 100%;
}
.footer{
width: 50%;
margin: 0 auto;
font-size: 25px;
color: #A5A58D;
text-decoration: none;
border-right: 1px solid #A5A58D;
padding: 0 20px;
}
.footer2{
font-size: 25px;
color: #A5A58D;
text-decoration: none;
padding: 0 20px;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="WS 2020 Screendesign Unterseiten.css">
<title> ALINA'S POTTERY </title>
</head>
<body>
<div class="bg-image"></div>
<div class="header1"> Alina's Pottery </div>
<nav class="categoryContainer">
<ul>
<li><a href="home.html" title="Home" class="category">Home</a></li>
<li><a href="pottery.html" title="Pottery" class="category">Pottery</a>
<ul class="dropdown">
<li><a href="general.html" title="General" class="subCategory">General</a></li>
<li><a href="handbuilding.html" title="Hand-Building" class="subCategory">Hand-Building</a></li>
<li><a href="potterywheel.html" title="Pottery Wheel" class="subCategory">Pottery Wheel</a></li>
<li><a href="materials.html" title="Materials" class="subCategory">Materials</a></li>
<li><a href="temperatures.html" title="Temperatures" class="subCategory">Temperatures</a></li>
</ul>
</li>
<li class="current"><a href="tutorials.html" title="Tutorials" class="category">Tutorials</a>
<ul class="dropdown">
<li><a href="viewall.html" title="View All" class="subCategory">View All</a></li>
<li><a href="getstarted.html" title="Get Started" class="subCategory">Get Started</a></li>
<li><a href="plates.html" title="Plates" class="subCategory">Plates</a></li>
<li><a href="mugs.html" title="Mugs" class="subCategory">Mugs</a></li>
<li><a href="bowls.html" title="Bowls" class="subCategory">Bowls</a></li>
</ul>
</li>
<li><a href="shop.html" title="Shop" class="category">Shop</a></li>
</ul>
</nav>
<section class="textparagraphen4">
<div class="header3">
Tutorials
</div>
<div class="text6">
These videos should give you a kick-start to pottery, explaining the basics,</br>
clearing up common mistakes and offering inspiration for your future projects.</br>
Pottery is actually super easy to learn - everybody can do it.</br>
That’s why I want to give you all the tools to start out even as a total beginner.</br>
</br>
Follow these links to get to the different tutorials:</br>
</div>
<div class="links">
<ol>
<li><a href="getstarted.html" title="Get Started" class="linksammlung"> GET STARTED</a></li>
<li><a href="plates.html" title="Plates" class="linksammlung"> PLATES </a></li>
<li><a href="mugs.html" title="Mugs" class="linksammlung"> MUGS </a></li>
<li><a href="bowls.html" title="bowls" class="linksammlung"> BOWLS </a></li>
</ol>
</div>
<div class="text 6">
And always remember: imperfect ceramics are way better and more personal than perfect ones!
</div>
</section>
<div class="tutorialvideo">
<iframe width="70%" height="756px" src="https://www.youtube.com/embed/JOko1ygjPwk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<section class="bildabschnitt2">
<div class="abbildung5">
<img src="https://images.pexels.com/photos/3626588/pexels-photo-3626588.jpeg?cs=srgb&dl=pexels-daria-shevtsova-3626588.jpg&fm=jpg" alt="Cupboard" width="622px" height="622px">
</div>
<div class="abbildung6">
<img src="https://images.pexels.com/photos/4440217/pexels-photo-4440217.jpeg?cs=srgb&dl=pexels-taryn-elliott-4440217.jpg&fm=jpg" alt="Work Space" width="622px" height="622px">
</div>
</section>
<div class="footerContainer">
<a href="aboutme.html" title="About Me" class="footer">About Me</a>
<a href="socials.html" title="Socials" class="footer"> Socials</a>
<a href="imprint.html" title="Imprint" class="footer2">Imprint</a>
</div>
</body>
<div class="bg-image"></div>
</html>1。子菜单显示
对于您的下拉菜单，当悬停第一级链接时，您没有任何规则来显示它。
所以你可以添加一个规则，比如：
.categoryContainer > ul > li:hover > .dropdown {
left:0;
}
2.字体大小导航栏
您可以为nav标记定义font-size: 20px。但是您也定义了font-size:10px到a标签。所以规则为a标记擦除nav规则。
你可以添加一个更具体的规则，如下所示：
nav a {
font-size: 20px;
}
3.相邻段落中的链接
因为您为所有ul和li定义了规则，所以请尝试在css规则中更加具体
相反：
ul, li{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
这样做：
nav.categoryContainer ul, nav.categoryContainer li{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
结论
这是一个代码更新的代码笔：https://codepen.io/zecka/pen/ZEpjbVK
但我在你的代码中看到了很多其他问题。
所以请注意：
- 尝试使用class，并在css规则上更加具体
- 避免使用固定高度的元素
- 不必要时避免绝对位置
尝试将这些添加到样式表中
.categoryContainer ul li:nth-child(2):hover ul.dropdown{
display: block;
}
nav ul li a {
font-size: inherit;
}
ol {
display: flex;
flex-direction: column;
}
- 悬停问题：
您选择了不正确的元素(样式(第一部分lia：悬停，这意味着你正在尝试为a添加样式，而事实上，你正在字符串为ul设置样式第二部分与基本相同
导航中的- 字体大小
锚点没有继承
- 元素并排放置
你可能想看看CSS"；显示"；属性，这些应该是块吗？内联？内联块？我认为显示：柔性更容易处理。