Плавающий саб UL, сохраняющий ширину родителя - PullRequest
Новая
       34

Плавающий саб UL, сохраняющий ширину родителя

0 голосов
/ 02 декабря 2011

Здесь есть некоторые похожие проблемы, но ни одно из решений не подходит к моей ситуации. У меня есть навигация, которая должна быть в центре. В UL есть суб-навигация, которую нужно выровнять по левому краю относительно родительского LI и расположить горизонтально. Когда я плаваю слева от навигационной LI, UL сохраняет ширину родительской LI.

Я бы установил фиксированный PX, но под-навигация должна быть расширяемой, чтобы клиент мог добавлять или удалять элементы навигации и сохранять макет.

Вот мой HTML: 

<nav>
    <ul>
        <li><a href="../who_we_are/who_we_are.html">Who We Are</a>
            <ul>
            <li><a href="../who_we_are/our_approach.html">Our Approach</a></li>
                <li><a href="../who_we_are/what_we_do/what_we_do.html">What We Do</a></li>
                <li><a href="../who_we_are/leadership.html">Leadership</a></li>
            </ul>
        </li>
        <li><a href="../our_results/our_results.html">Our Results</a>
            <ul>
                <li><a href="../our_results/case_study_a.html">Case Study A</a></li>
                <li><a href="../our_results/case_study_b.html">Case Study B</a></li>
            </ul>
        </li>
        <li><a href="../our_experience/our_experience.html">Our Experience</a>
            <ul>
                <li><a href="#">Category Experience</a></li>
            </ul>
        </li>
        <li class="current"><a href="what_we_think.html">What We Think</a>
            <ul>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Category Insight</a></li>
                <li><a href="#">Research</a></li>
                <li><a href="#">Training</a></li>
            </ul>
        </li>
        <li><a href="#">News</a>
            <ul>
                <li><a href="#">Press Releases</a></li>
                <li><a href="#">Articles</a></li>
            </ul>
        </li>
        <li><a href="#">Connect With Us</a>
            <ul>
              <li><a href="#">Join Us</a></li>
                <li><a href="../connect_with_us/find_us.html">Find Us</a></li>
            </ul>
        </li>
        <li><div class="search"><input name="searchbox" type="text" id="searchbox" class="input_style" value="SEARCH" onFocus="if (this.value == 'SEARCH') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'SEARCH';}"><button></button></div></li>
    </ul>
</nav>

Вот мой CSS: 

nav a,
nav a:visited {
    color: #888888;
    text-decoration: none;
    display: inline-block;
    line-height: 30px;
}
nav a:hover {
    color: #CCC;
}
nav a:active {
    color: #FFF;
}
nav {
    text-align: center;
}
nav ul {
    display: inline-block;
    position: relative;
    z-index: 597;
}
nav ul li {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    z-index: 599;
    line-height: 30px;
}
nav ul li ul {
    display: none;
}
nav li.current a {
    background: url(../img/nav_arrow.png) no-repeat center bottom;
    color: #FFF;
}
nav li.current ul {
    display: block;
    position: absolute;
    z-index: 598;
    top: 31px;
    left: 1px;
    width: auto;
}
nav li.current ul a {
    background: url(none);
    color: #888888;
}
nav li.current ul li {
    float: left;
    display: inline-block;
}
nav .search {
    height: 18px;
    width: 84px;
    padding-left: 4px;
    background: url(../img/search_bk.png) no-repeat;
    margin-left: 20px;
    margin-top: 5px;
    float: left;
}
nav .search input {
    height: 14px;
    width: 68px;
    float: left;
    background-color: transparent !important;
    border-style: none;
}
nav .search input.input_style {
    font-family: "proxima-nova", sans-serif;
    padding-top: 3px;
    color: #777777;
}
nav .search button {
    height: 11px;
    width: 10px;
    float: left;
    background-image: url(../img/search_btn.png);
    background-color: transparent;
    border-style: none;
    background-repeat: no-repeat;
    margin-top: 3px;
}

Вот скриншот: Мой скриншот

Заранее спасибо!

1 Ответ

0 голосов
/ 10 января 2012

Просто сделайте ширину подменю UL чем-то смешным, например width: 2000px вместо width: auto; таким образом, предметы могут плавать горизонтально в суб-навигации ул.

Обычно меню веб-сайта не будет превышать ширину области страницы, так почему это важно, если UL подменю имеет слишком большую ширину? Он предназначен только для размещения ваших элементов li, которые будут плавать над любым содержимым.

Я использую это: http://matthewjamestaylor.com/blog/centered-dropdown-menus

Так что мое подменю ul выглядит так: 

#centeredmenu ul ul {
display: none;
float: left;
left: 0;  // important to keep menu left aligned to parent li element>
position: absolute;
right: auto;
top: 2em;
width: 1000px; // set to whatever you want //
}


#centeredmenu ul ul li {   

display: inline-block; // not really needed
left: 0; // important
}
...