Html 我如何为这些项目制作下拉菜单，而不让它们出现故障或妨碍某些事情_Html_Css

Html 我如何为这些项目制作下拉菜单，而不让它们出现故障或妨碍某些事情

html css

Html 我如何为这些项目制作下拉菜单，而不让它们出现故障或妨碍某些事情,html,css,Html,Css,大家好，我的问题是如何为实际的分配按钮添加分配页面ass下拉菜单。在我的css代码中。我希望它们显示在分配按钮下方，而不是出现故障和更改其他按钮的顺序，我会通知帮助 <body id="page3"> <header> <div class="main"> <div class="logo"> <img

大家好，我的问题是如何为实际的分配按钮添加分配页面ass下拉菜单。在我的css代码中。我希望它们显示在分配按钮下方，而不是出现故障和更改其他按钮的顺序，我会通知帮助

    <body id="page3">                                         
<header>
    <div class="main">
        <div class="logo"> 
            <img src="../logo.png">
        </div>
        <ul>
            <li class=""><a href="smth.html">Home</a></li>
            <li><a href="cont.html">Contact me</a></li>
            <li><a href="#">Assignments</a>
                <ul>
                <li><a href="#">Assignment Week1</a></li>
                <li><a href="#">Assignment Week1</a></li>
                <li><a href="#">Assignment Week1</a></li>
                <li><a href="#">Assignment Week1</a></li>
                <li><a href="#">Assignment Week1</a></li>
                </ul>
            </li>
            <li><a href="#">Info</a></li>
        </ul>
    </div>
    <div class="title">
        <h1>Assignments</h1>
    </div>
</header>
</body>
</html>

关于“小故障”，这个问题有点不清楚，但我想我理解你的问题。CSS中缺少一些东西来构建基本下拉列表

第一级li应设置“位置：相对”

第二级ul应设置“位置：绝对”

默认情况下，您需要隐藏嵌套的ul，然后悬停时显示

我相信有很多关于如何构建一个合适的CSS菜单下拉列表的参考资料，下面是一些基本的修改，展示了基本的概念

ul{
列表样式类型：无；
边缘顶部：10px；
填充：0；
}
ulli{
显示：内联flex；
位置：相对位置；
}
ul li ul{
位置：绝对位置；
显示：无；
保证金：0；
填充：0；
}
ul-li：悬停ul{
显示：内联块；
顶部：3.7rem；
左：0；
}
ul li ul li a{
最小宽度：200px；
}
ullia{
文字装饰：无；
颜色：黑色；
填充：20px 25px；
边框：1px实心透明；
过渡：0.8s缓解；
显示：内联块；
边框：1px纯黑；
}
悬停{
背景色：白色；
颜色：黑色；
}
主动的，主动的{
背景色：白色；
颜色：黑色；
}
.头衔{
显示：块；
}
















作业

ul{
    float:left;
    list-style-type: none;
    margin-top:10px;
}
ul li{
    display:inline-flex;
}
ul li a{
    text-decoration:none;
    color:black;
    padding:20px 25px;
    border:1px solid transparent;  
    transition:0.8s ease;
}
ul li a:hover{
background-color: white;
color:black;
}
ul li.active a{
    background-color: white;
color:black;
}