Шрифт моей выпадающей кнопки в панели навигации - другой шрифт, чем другие заголовки - PullRequest
Новая
       5

Шрифт моей выпадающей кнопки в панели навигации - другой шрифт, чем другие заголовки

0 голосов
/ 08 марта 2020

Итак, я сделал эту панель навигации, и есть 1 заголовок, который является выпадающим меню. Этот заголовок имеет другой шрифт, чем другие. Если вы наводите курсор на это выпадающее меню, ссылки имеют правильный шрифт. Может ли кто-нибудь помочь мне с этим? 

/* Navbar */
    .topnav {
        list-style-type: none;
        overflow: hidden;
        background-color: #363636;
        box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
        transition: all .2s ease-in;
        font-weight: 700;
        text-transform: uppercase;
    }

    .topnav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 24px 26px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a:hover {
        color: #bdbdbd;
    }

    .topnav .icon {
      display: none;
    }

    /* Dropdown container */
    .dropdown {
        float: left;
        overflow: hidden;
      }

      /* Dropdown button */
    .dropdown .dropbtn {
        font-size:16px;
        border: none;
        outline: none;
        color: white;
        padding: 24px 26px;
        background-color: inherit;
        font-family:'PT Sans', sans-serif; 
        font-style: inherit;
        margin: 0; 
      }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }

      /* Links inside the dropdown */
      .dropdown-content a {
        float: none;
        color: black ;
        padding: 24px 26px;
        text-decoration: none;
        display: block;
        text-align: left;
      }

      /* Background dropdown links */
      .dropdown-content a:hover {
        background-color: #ddd;
      }

      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {
        display: block;
      }
image

Навбар: https://i.stack.imgur.com/CLEeO.png

Навбар с выпадающим списком: https://i.stack.imgur.com/kzEa7.png

1 Ответ

0 голосов
/ 08 марта 2020

Причина в том, что остальные ваши навигационные ссылки являются элементами a, а ваша мошенническая навигационная ссылка является элементом button.

Если кнопка выпадающего меню не должна выглядеть иначе Вы можете просто удалить стиль шрифта из него: 

      /* Dropdown button */
    .dropdown .dropbtn {
        // font-size:16px;
        border: none;
        outline: none;
        // color: white;
        padding: 24px 26px;
        background-color: inherit;
        // font-family:'PT Sans', sans-serif; 
        font-style: inherit;
        margin: 0; 
      }

И обернуть элемент a вокруг неконтролируемой навигационной ссылки.

...