时间戳

首页 > 解决方案 > 如何子导航栏css？

html - 如何子导航栏css？

问题描述

我想在Accounts按钮下制作子菜单。我希望当我将鼠标悬停在Accounts按钮上时显示子菜单。我试过这个但它不起作用：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Ahmed Shihab | Me </title>
        <link rel="stylesheet" href="about.css" >
        <link href="https://allfont.net/allfont.css?fonts=courier" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    </head>
    <body>
    <div class="topnav">
        <a href="main.html">Home  </a>
        <a href="about">About  </a>
        <a class="acc" href="acc">Accounts</a>   <!-- THIS IS WHAT I WANT TO MAKE IT BUTTON --> 
        <a class="hide" href="face">-Facebook </a>
    </div>
    </body>
</html>

所以我想改变Account一个按钮，当它悬停在上面时，它会显示Facebook链接，我想Twitter在Facebook.

CSS：

.acc {
    font-family:'Courier', arial;
    color:black;
    font-size:3em;
    text-decoration:none;
    text-align:center;
    overflow:hidden;;
}
.hide {
    font-family:"Courier";
    color:black;
    font-size:3em;
    display:hidden;
    position:relative; top:45px; right:234px;
    overflow:hidden;
}

标签： htmlcss

解决方案

这是你想要达到的目标吗？

.subnav{
    display: none;
}

.topnav li:hover .subnav{
    display: block;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Ahmed Shihab | Me </title>
        <link rel="stylesheet" href="about.css" >
        <link href="https://allfont.net/allfont.css?fonts=courier" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    </head>
    <body>
    <ul class="topnav">
        <li><a href="main.html">Home</a></li>
        <li><a href="about">About</a>
            <ul class="subnav">
                <li class="acc"><a href="acc">Accounts</a></li>   <!-- THIS IS WHAT I WANT TO MAKE IT BUTTON --> 
                <li class="hide"><a href="face">-Facebook</a></li>
            </ul>
        </li>
    </div>
    </body>
</html>

我强烈建议你学习一些有关 CSS 选择器的知识，尤其是:hover。

推荐阅读