Настройка начальной загрузки СЧА с CSS

я создал навигацию в центре с ниже код HTML и код CSSНастройка начальной загрузки СЧА с CSS

HTML Code

<nav class="navbar navbar-inverse navbar-fixed-top navbar-inner" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">PROFILE</a></li> 
      <li><a href="#">BUSINESS SOLUTIONS</a></li> 
      <li><a href="#">PRODUCTS</a></li> 
      <li><a href="#">PARTNERS</a></li> 
      <li><a href="#">CAREERS</a></li> 
      <li><a href="#">NEWS</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav>

CSS code

.navbar .nav, .navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; } 
.navbar-inner { text-align:center; }

Похоже, что этот enter image description here

Но я был похож на Home на активный и зависающий. Как я могу это сделать enter image description here

Я искал маленькую красную подсветку, когда выбрано меню и то же самое, когда я наводил на нее курсор мыши.

источник

2015-04-02 Milind

Не могли бы вы немного расширить объяснение. Также изображения слишком малы. Я почти не вижу красной линии, это то, что вы хотите? – sinanspd

Yea Просто нужно небольшое красное подчеркивание, когда выбрано меню, и то же самое, когда я наводил на него курсор мыши. – Milind

Вам нужны два селектора в css 'ul.nav li.active a' и' ul.nav li: hover a', а затем установите 'text-decoration: underline;' –

Попробуйте это,

.nav li.active a,.nav li:hover a{ 
background:none !important; 
    box-shadow:none !important; 

}

Working Demo

Обновленный код

.nav li.active a span,.nav li:hover a span{ 
    border-bottom:1px solid red; 
    display:block 
}

Updated Fiddle Demo

источник

2015-04-02 05:52:29 Logz

Что я сделал уже, но я смотрел под строкой под текстом не столько вниз и короче текста, сколько 50% и в центре – Milind

Так что с кодом, который вы предоставили, я сделал это. Если вы хотите внести какие-либо изменения, просто дайте мне знать, я внесу необходимые изменения. Основная идея заключается в использовании:

border-bottom

li:hover

свойства.

Вот скрипка: http://jsfiddle.net/L7x85dp5/

источник

2015-04-02 05:49:25 sinanspd

Это я уже сделал, но я смотрел под строкой чуть ниже текст не так низок и короче текста, как 50%, а в центре – Milind

Настройка начальной загрузки СЧА с CSS

ответ

Смежные вопросы