0

В то время, когда любые другие свойства (такие, как цвет фона, рамки и тд) легко переопределяются. Код HTML:

header {
background-color: #00008B;
margin: 0;
font-size: 18px;
}

.menu {
  border: none;
}
.nav-left li,
.navbar-right li {
  padding: 15px 15px;
}

.navbar-right li {
  padding-right: 50px;
}

.navbar-logo {
  padding-right: 60px;
  padding-left: 60px;
}

.navbar-logo img {
  position: relative;
  top: 25px;
}

.nav-left li:hover,
.navbar-right li:hover {
  text-transform: uppercase;
  color: #32CD32;
}

.navbar-nav .active-link {
  text-transform: uppercase;
}
<header>
      <nav class="navbar navbar-default menu">
  <div class="container">
    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-logo" href="#"><img src="img/logo.png" width="35"></a>
    </div>

    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav nav-left">
        <li class="active-link"><a href="#">Professional skills</a></li>
        <li><a href="#">Projects</a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About me <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Education</a></li>
            <li><a href="#">Hobby</a></li>
          </ul>
        </li>
        <li><a href="#">Interesting in web</a></li>
      </ul>


      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

1 ответ 1

1

Вы задаете стиль на li, а не на ссылку, нужно задавать изменения на ссылку попробуйте так:

.nav-left li:hover a,
.navbar-right li:hover a {
  text-transform: uppercase;
  color: #32CD32;
}

header {
background-color: #00008B;
margin: 0;
font-size: 18px;
}

.menu {
  border: none;
}
.nav-left li,
.navbar-right li {
  padding: 15px 15px;
}

.navbar-right li {
  padding-right: 50px;
}

.navbar-logo {
  padding-right: 60px;
  padding-left: 60px;
}

.navbar-logo img {
  position: relative;
  top: 25px;
}

.nav-left li:hover a,
.navbar-right li:hover a {
  text-transform: uppercase;
  color: #32CD32;
}

.navbar-nav .active-link {
  text-transform: uppercase;
}
<header>
      <nav class="navbar navbar-default menu">
  <div class="container">
    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-logo" href="#"><img src="img/logo.png" width="35"></a>
    </div>

    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav nav-left">
        <li class="active-link"><a href="#">Professional skills</a></li>
        <li><a href="#">Projects</a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About me <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Education</a></li>
            <li><a href="#">Hobby</a></li>
          </ul>
        </li>
        <li><a href="#">Interesting in web</a></li>
      </ul>


      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

В будущем будут такие пробелы встречаться, приучите себя задавать стили всегда напрямую на ссылку, а не на родительский элемент, у бутстрапа изначально цвет задан во всех состояниях.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.