как я могу сделать выпадающее меню на всю ширину

Question

как я могу сделать выпадающее меню на всю ширину

0

Я как-то не смог управлять этим меню до полной ширины, это мой код http://codepen.io/anon/pen/xwDcb

Я хочу, чтобы моя ширина выпадающего меню была на 100% слева направо. Что я делаю не так

body {
background-color:#000;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
width:100%;
}
.nav-full {
background:url(../images/nav-bg.png) no-repeat 0 0;
}
.nav-centre {
width:960px;
margin:0 auto
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both
}
.nav ul {
list-style: none;
}

мой html-код

<a class="toggleMenu" href="#">Menu</a>

<div class="nav-full">
<div class="nav-centre">
    <ul class="nav">
        <li><a href="index.html" class="active">HOME</a>

            <ul>
                <li><a href="#jquery-pagescroller-2">Indus Advantage</a>
                </li>
                <li><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a>
                </li>
                <li><a href="#jquery-pagescroller-4">Pipeline</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Products</a>

            <ul>
                <li><a href="#">Overview</a>
                </li>
                <li><a href="#">Exercise Physiology</a>
                </li>
                <li><a href="#">Manufacturing & Quality Control</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Patents & Publications</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Global Patenting Strategy</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Publications</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Partnering</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Enquiries - Product</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">About Us</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Vision & Values</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Contact Us</a>

        </li>
        <li> <a href="#">Careers</a> 
        </li>
    </ul>
</div>
</div>

San 24 сен. 2013, в 11:10

Источник

Теги:

html

css

responsive-design

drop-down-menu

menu

2 ответа

Ещё вопросы

Moses · Answer 1 · 2013-09-24T06-56-00.000Z

проверьте этот код

<style>
#nav { 
    height: 1; 
    list-style-type: none; 
    padding-top: 1.25em; 
    margin-top: 0em;
}

#nav > li {  /* Added ">" */
    float: right; 
    position: relative;
    padding: 0;
} 

#nav li a { 
    display: inline-block; /* was block */ 
    font-size: 14px; 
    padding: 0 1em;  
    margin-bottom: 1em; 
    color: #333; 
    text-decoration: none; 
    border-left: 1px solid #333; 
}

#nav .last, #nav li ul li a {
    border-left: none;
}

#nav li a:hover, #nav li a:focus {
    color: #666;
}

#nav li ul { 
    opacity: 0; 
    /*position: absolute; 
    right: 0em; */
    list-style-type: none; 
    padding: 0; margin: 0; 
}

#nav li:hover ul { 
    opacity: 1; 
}

#nav li ul li { 
    /*float: none; 
    position: static; 
    width: auto;*/ 
    height: 0; 
    line-height: 0; 
    background: none; 
    text-align: left; 
    margin-bottom: .75em;
}

#nav li:hover ul li { 
    height: 25px; 
    line-height: 2.5em;
}</style>
<ul id="nav">
<a class="toggleMenu" href="#">Menu</a>

<div class="nav-full">
<div class="nav-centre">
    <ul class="nav">
        <li><a href="index.html" class="active">HOME</a>

            <ul>
                <li><a href="#jquery-pagescroller-2">Indus Advantage</a>
                </li>
                <li><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a>
                </li>
                <li><a href="#jquery-pagescroller-4">Pipeline</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Products</a>

            <ul>
                <li><a href="#">Overview</a>
                </li>
                <li><a href="#">Exercise Physiology</a>
                </li>
                <li><a href="#">Manufacturing & Quality Control</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Patents & Publications</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Global Patenting Strategy</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Publications</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Partnering</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Enquiries - Product</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">About Us</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Vision & Values</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Contact Us</a>

        </li>
        <li> <a href="#">Careers</a> 
        </li>
    </ul>
    </ul>
</div>
</div>

нах чувак ... меню пошло на бросок ... так что делать некоторые исследования
изменить выравнивание текста: вправо; выравнивание текста: слева;

Timotheus Triebl · Answer 2 · 2013-09-24T06-16-00.000Z

вы должны дать классу nav-center 100%, теперь его на 975px или что-то в этом роде, и он обертывает ваши элементы списка. поэтому 100% неупорядоченного списка относятся к элементу nav-center.

и если вы хотите, чтобы меню навигационного меню было сосредоточено на уровне навигационного центра: relative; слева: 50% и маржа: слева -511px. (margin-left должен иметь ширину неупорядоченного списка)

я думаю, лучшим решением было бы то, что вы выведете выпадающее меню из ul с навигатора. Таким образом, это не относится к другому списку.

разметьте свой html следующим образом:

<a class="toggleMenu" href="#">Menu</a>

<div class="nav-full">
    <div class="nav-centre">
        <ul class="nav">
            <li><a href="index.html" class="active">HOME</a></li>
            <li> <a href="#">Products</a></li>
            <li> <a href="#">Patents & Publications</a></li>
            <li> <a href="#">Partnering</a></li>
            <li> <a href="#">About Us</a></li>
            <li> <a href="#">Contact Us</a></li>
            <li> <a href="#">Careers</a> </li>
        </ul>

        <ul>
            <li class="under"><a href="#jquery-pagescroller-2">Indus Advantage</a></li>
            <li class="under"><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a></li>
            <li class="under"><a href="#jquery-pagescroller-4">Pipeline</a>
        </ul>
        <ul>
            <li class="under"><a href="#">Overview</a></li>
            <li class="under"><a href="#">Exercise Physiology</a></li>
            <li class="under"><a href="#">Manufacturing & Quality Control</a></li>
        </ul>
        <ul>
            <li class="under"><a href="#jquery-pagescroller-0">Global Patenting Strategy</a></li>
            <li class="under"><a href="#jquery-pagescroller-1">Publications</a></li>
        </ul>
        <ul>
            <li class="under"><a href="#jquery-pagescroller-0">Enquiries - Product</a></li>
            <li class="under"><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a></li>
        </ul>
        <ul>
            <li class="under"><a href="#jquery-pagescroller-0">Vision & Values</a></li>
            <li class="under"><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a></li>
        </ul>

    </div>
</div>

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