时间戳

首页 > 解决方案 > CSS - Button:focus 不允许我点击链接

html - CSS - Button:focus 不允许我点击链接

问题描述

我正在尝试创建一个网站，当我单击“菜单”时，它会向我显示带有链接的导航栏。当我尝试单击其中一个链接时，它们突然消失了。我知道这是因为焦点按钮不再被定位，但我怎样才能让它让我点击那里？ 一些图片可以让您更好地理解它-> 关闭菜单- 打开菜单
一些用于样式的CSS可能丢失了，但这就是给我带来问题的那个

    nav {display: none;
        height: 13em;
        padding-top: 1em;
        border-bottom-left-radius: 1em;
        border-bottom-right-radius: 1em;
    }
        

    
        .navbutton {
            text-align: center;
            text-decoration: none;
            width: 30%;
            font-family: sans-serif;
            color: #1b5e20;
            padding-top: 0.2em;
            font-weight: bold;
            margin-left:35%;
            margin-bottom: 0.5em;
            border-radius: 1em;
            font-size: 100%;
            background-color: white;
    }
    
    button {height: 3em;
        width: 100%;
        background-color: #1b5e20;
        color: white;
        transition: 0.3s;
        display: block;
        border-style: none;}

    .menu   {font-family: sans-serif;
                     text-align: center;
                     margin-left: 0 auto;
                     margin-right: 0 auto;
                     background-color: white;
                    border-radius: 1em;
                    color:white;
                    background-color: #4c8c4a;
                    padding-left: 1em;
                    padding-right: 1em;
                    font-size: 1.6em;
            }
    
    .close {
            display:inline;
            text-align: center;
            text-decoration: none;
            font-family: sans-serif;
            color: white;
            padding: 0.3em;
            font-weight: bold;
            margin-left:48%;
            margin-top: 5%;
            border-radius: 100em;
            background-color: darkred;
            cursor: pointer;
    }
    .close:hover, .close:active {display: none;}
            
    
<html lang="de" dir="ltr">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mediterrane Pflanzen Alongi - Photogallery</title>
    <link rel="stylesheet" type="text/css" href="design.css" />

    <style>

        button:active+nav, button:focus+nav {display: block;}
        button:active+nav, button:focus+nav {display: block;}
                                           
    </style>
</head>
  <body>

<button> 
    <a class="menu">Menu</a>
</button>

    <nav class="navbar">
    <a class="navbutton" href="mediterrane pflanzen home.html">Home</a>
 <a class="navbutton" href="mediterrane%20pflanzen%20photogallery.html">Galerie</a>
    <a class="navbutton" href="mediterrane pflanzen kontakt.html">Kontakt</a>
    <a class="navbutton" href="mediterrane%20pflanzen%20uber%20uns.html">&Uuml;ber uns</a>
    <a class="navbutton" href="mediterrane%20pflanzen%20impressum.html">Impressum</a>
    <a class="close">X</a>
    </nav>

标签： htmlcss

解决方案

推荐阅读