0

Добрый день.В общем,проблемка,не могу побороть и буду дико рад, если кто то подскажет. Есть навигация http://codepen.io/urbanlol/pen/vLBbZm, есть выпадающее меню, хотелось бы что бы это подменю было на 100% по ширине.

HTML

<header>
<div class="header-top">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-3 ">

            </div>
            <div class="col-md-8 col-md-offset-1 col-sm-8 col-sm-offset-1">
                <a href="#" id="pull"><i class="fa fa-align-justify"></i></a>
                <nav>
                    <ul class="nav-header">
                        <li><a href="index.php" title="главная">главная</a></li>
                        <li>
                            <a href="repairs.php" title="ремонт помещений">ремонт помещений</a>
                            <ul class="nav-header_dropdown">
                              <li><a href="#" title="авторский надзор">авторский надзор</a></li>
                              <li><a href="#" title="ремонт квартир">ремонт квартир</a></li>
                               <li><a href="#" title="ремонт офисов">ремонт офисов</a></li>
                               <li><a href="#" title="ремонт дома">ремонт дома</a></li>
                               <li><a href="#" title="ремонт коттеджей">ремонт коттеджей </a></li>
                            </ul>
                          <ul class="class"></ul>
                        </li>
                        <li>
                            <a href="design.php" title="дизайн интерьера">дизайн интерьера</a>
                            <ul  class="nav-header_dropdown">
                                    <li><a href="inside_page.php" title="дизайн квартир">дизайн квартир</a></li>
                                    <li><a href="#" title="дизайн комнаты">дизайн комнаты</a></li>
                                    <li><a href="#" title="дизайн дома">дизайн дома</a></li>
                                    <li><a href="#" title="декоративная роспись стен">декоративная роспись стен</a></li>
                            </ul>
                        </li>
                        <li><a href="construction.php" title="строительные работы">строительные работы</a></li>
                        <li><a href="portfolio.php" title="портфолио">портфолио</a>
                        </li>
                        <li><a href="contacts.php" title="контакты">контакты</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</header>
2
  • а вы знаете что у вас открывающий тег header а закрывающий, почему-то head?
    – Grundy
    3 дек 2015 в 12:41
  • та не знал,эт кусочек с версточки,я просто скопировал в кодпен.исправил
    – urbanlol
    3 дек 2015 в 12:52

2 ответа 2

4

на 100% по ширене кнопки:

header .nav-header li:hover ul{
        //width: 126px; -- убираем это
        opacity: 1;
        text-align: left;
        background-color:rgba(36, 36, 36, 0.75);
        position: absolute;
        top:0;
        left:0;
    }

На 100% родителя:

  1. У родителя выпадающей меню <li>, надо убрать position:relative; или поставить значение static
  2. у nav-header поставить position: relative;
  3. Самой выпадающей менющке (.nav-header_dropdown), надо дописать

    left: 0; right: 0;

Тогда она будет открываться на 100% то ширине экрана.

3
  • по 100% ширине родительского размера.
    – NeedH8
    3 дек 2015 в 13:18
  • а с помощью JS можно как то это преодолеть?
    – urbanlol
    3 дек 2015 в 13:27
  • Можно. но уже сложнее. Надо добавлять менюшку не в родителя (в нашем случае <li>) а в конец DOMа <!--сюда--> </body> и уже там, растягивать и пизиционировать, относительно всего меню. *Этот вариант овень не правильный, и я бы так не советовал делать. Лучше пересмотреть, что там мешает. На крайний случай оверрайдить стили !important 3 дек 2015 в 13:30
0

Ссылка на рабочий пример :

header {
     width: 100%;
     color: #fff;
    position: relative;
}
.header-top{
    position: fixed;
    width: 100%;
    z-index: 110;
    background: url(http://interior-design.amk-web.com/assets/images/home/header/background_menu.gif);
}
header .logo-top{
    outline: none;
    margin: 13px 0 20px 0;
    position: relative;
    z-index: 1;
}
header .nav-header{
position: relative;
    margin-top: 32px;
    text-align: right;
}

header ul li{
    display: inline-block;
    margin-right: 4%;

    -webkit-transition: 0.25s linear;
}
header .nav-header ul{
    list-style: none;
    position: absolute;
    left: -9999px;
    opacity: 0;
    -webkit-transition: 0.25s linear opacity;
     }
.nav-header a {
    font-family: "BebasBold",sans-serif;
    text-transform: uppercase;
    color: #EAEAEA;
    font-size: 18px;
    text-decoration: none;
    letter-spacing: 0.8px;
}
header .nav-header li a {
    display: block;
    color: #aaa;
    position: relative;
    z-index: 1;
}
header a:hover{
    text-decoration: none;
    -webkit-transition:100ms ease-in;
    -moz-transition:120ms ease-in;
    -o-transition:120ms ease-in;
    transition:120ms ease-in;
}
header .nav-header a:hover{
    color: #fff;
}
header .nav-header a:focus{
    outline: none;
    color: #cf383b;
    text-decoration: none;
}
header .nav-header li:hover ul{
        width: 100%;
opacity: 1;
text-align: left;
background-color: rgba(36, 36, 36, 0.75);
position: absolute;
 left: 0;
top: 100%;
}
header .nav-header li:hover .class{
  position: fixed;
  background-color:rgba(36, 36, 36, 0.75);
}
header .nav-header li:hover ul li:first-child{
    margin-top: 26px;
}
header .nav-header li:hover ul li:last-child{
    margin-bottom: 5px;
}
header .nav-header li:hover ul li{
    padding:15px 0 0 0;
    text-transform: uppercase;
    display: block;
    position: relative;
}

header .nav-header li li a:focus::after{
    display: none;
} 
2
  • спасибо за помощь, но мне необходимо, что бы каждая всплывашка была под родительским li,а не в одной позиции слева)
    – urbanlol
    3 дек 2015 в 13:30
  • дальше писать не вижу смысла - всё подходит - вроде - смотрите --codepen.io/anon/pen/PZoLKx?editors=110
    – user33274
    6 дек 2015 в 13:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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