1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Решено] Исправить меню

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем jelez9ka, 30 мар 2017.

Статус темы:
Закрыта.
  1. jelez9ka

    jelez9ka

    Регистрация:
    30 мар 2017
    Сообщения:
    5
    Симпатии:
    1
    Господа, добрый день!

    Помогите исправить меню на сайте, все перелопатил никак не могу сделать.

    Суть в том, что хочу сделать выпадающий блок, обведенный синим цветом, точно такой же шириной, что и красная полоса(выделенная зеленым цветом).

    [​IMG]

    Что нужно в коде поменять? Помогите, сам не сильно в этом разбираюсь.


    Код:
    @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
    h1{
      font:400 40px 'pt sans',sans-serif;
      text-align:center;
    }
    .nav a{
      text-decoration:none;
    }
    .nav{
      height:70px;
      background:#222;
      position:relative;;
    }
    .nav>ul{
        position:absolute;
      list-style:none;
      padding:0;
      margin:0;
    }
    .nav>ul>li>ul{
      position:absolute; z-index: 1000;
      left:0;
      padding:0;
      margin:0;
      list-style:none;
    }
    .nav>ul>li:hover>ul li a{
      opacity:1;
      height:50px;
       transition:all .3s linear;
      -o-transition:all .3s linear;
      -moz-transition:all .3s linear;
      -webkit-transition:all .3s linear;
    }
    .nav>ul>li>ul a{
      display:block;
      color:#222;
      width:150px;
      line-height:50px !important;
      font:700 14px 'pt sans',sans-serif;
      background:#eee;
      border-bottom:1px solid #ddd;
      text-align:center;
      padding:0 5px;
       height:0;
      overflow:hidden;
      opacity:0;
        transition:all .3s linear .2s;
      -o-transition:all .3s linear .2s;
      -moz-transition:all .3s linear .2s;
      -webkit-transition:all .3s linear .2s;
    }
    .nav>ul>li{
      float:left;
      position:relative;
    }
    .nav>ul>li>a{
      padding:0 20px;
      color:#fff;
      display:block;
      line-height:70px !important;
      font:400 15px 'PT Sans', sans-serif;
      text-transform:uppercase;
      text-decoration:none;
    }
    .lamp span{
      display:block;
      height:4px;
      background: #EF2A24;
      position: relative;
    }
    .lamp span:after {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(238, 102, 102, 0);
        border-bottom-color: #EF2A24;
        border-width: 4px;
        margin-left: -4px;
    }
    .lamp{
      position:absolute !important;
      height:4px;
      top:66px;
      background:#333;
      transition:all .3s linear;
      -o-transition:all .3s linear;
      -moz-transition:all .3s linear;
      -webkit-transition:all .3s linear;
    }
    .selected.active>a,.active>a{
      transition:all .3s linear;
      -o-transition:all .3s linear;
      -moz-transition:all .3s linear;
      -webkit-transition:all .3s linear;
      color:#fff;
    }
    .credit{
      text-align:center;
      margin:20px 0;
    }
    .blog-link{
    color:#fff;
    text-decoration:none;
    background:#eee;
    background-size:40px;
    line-height:50px;
    display:inline-block;
    padding:0 10px;
    border-radius:4px;
    border-bottom:3px solid #ddd;
    color:#333;
    font-family:'open sans',sans-serif;
    margin:10px;
    }
    .dgithub{
    color:#fff;
    text-decoration:none;
    background:#eee url('https://lh6.googleusercontent.com/-MOW-T0KLZJI/UyR6EIggYkI/AAAAAAAAEbM/el92Uoxz-aI/s50-no/GitHub-Mark.png') no-repeat;
    background-size:40px;
    line-height:50px;
    display:inline-block;
    padding:0 10px 0 50px;
    background-position:5px;
    border-radius:4px;
    border-bottom:3px solid #ddd;
    color:#333;
    font-family:'open sans',sans-serif;
    margin:10px;
    }
     
    Lasted edited by : 31 мар 2017
  2. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    Способов много
    Код:
    .nav>ul>li>a{
    min-width:180px;
    }
    или добавить к ul>li или к ul
    А лучше сайт покажите, чтоб на 100% подсказать точно
    PS: А такую простыню-код под спойлер прячте
     
  3. jelez9ka

    jelez9ka

    Регистрация:
    30 мар 2017
    Сообщения:
    5
    Симпатии:
    1
    http://shumk-a.ru/
     
  4. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    Конкретно для пункта что на рисунке
    Код:
    .nav>ul>li>ul a {
        min-width: 250px;
    }
    А для других будет другие))
     
  5. jelez9ka

    jelez9ka

    Регистрация:
    30 мар 2017
    Сообщения:
    5
    Симпатии:
    1
    а как будет полностью выглядеть? немного не пойму куда вставлять)
     
  6. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    :threaten: в соответствующее правило в CSS добавить min-width:
    а для пунктов других через :nth-child()
     
  7. jelez9ka

    jelez9ka

    Регистрация:
    30 мар 2017
    Сообщения:
    5
    Симпатии:
    1
    :wacko: я в css ноль) если честно вообще не понимаю(
     
  8. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    Код:
    .nav>ul>li>ul {
      width: 100%;
    }
    .nav>ul>li>ul a {
        display: block;
        color: #222; 
        line-height: 50px !important;
        font: 700 14px 'pt sans',sans-serif;
        background: #eee;
        border-bottom: 1px solid #ddd;
        text-align: center;
        padding: 0 5px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all .3s linear .2s;
        -o-transition: all .3s linear .2s;
        -moz-transition: all .3s linear .2s;
        -webkit-transition: all .3s linear .2s;
    }
     
  9. jelez9ka

    jelez9ka

    Регистрация:
    30 мар 2017
    Сообщения:
    5
    Симпатии:
    1
    Спасибо Огромное!!!
     
    Perat нравится это.
Статус темы:
Закрыта.