Вложенное выравнивание выпадающего меню - PullRequest
0 голосов
/ 25 января 2012

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

Пока все выглядит нормально на Firefox.В Internet Explorer всплывающие меню сдвигаются вправо, а в Safari они сдвигаются влево.Я попробовал несколько вещей, но я думаю, что сейчас это мне не подходит.

Вот соответствующие HTML и CSS, хотя вы также можете просмотреть исходный код на сайте:

        <nav>
            <ul id="main-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Wood Wool</a></li>
                        <li><a href="#">Wood Wool Bales</a></li>
                        <li><a href="#">Wood Wool Rope</a></li>
                        <li><a href="#">Coloured Wood Wool</a></li>
                    </ul>
                </li>
                <li><a href="#">Applications</a>
                    <ul>
                        <li><a href="#">Hamper Packaging</a></li>
                        <li><a href="#">Wine &amp; Champagne</a></li>
                        <li><a href="#">General Gifts</a></li>
                        <li><a href="#">Soaps &amp; Cosmetics</a></li>
                        <li><a href="#">Shellfish Packaging</a></li>
                        <li><a href="#">Stable Bedding</a></li>
                        <li><a href="#">Industrial</a></li>
                        <li><a href="#">Pesticide Alternative</a></li>
                    </ul>
                </li>
                <li><a href="#">What's Wood Wool?</a></li>
                <li><a href="#">The Eco Bit</a></li>
                <li><a href="#">Get in touch</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>

/* NAVIGATION BAR */

header nav{
background-image: url(../_images/nav-bar-bg.png);
height: 48px;
width: 960px;
position: absolute;
top: 96px;
}

header nav #main-nav{
width:900px;
margin-left:30px;   
}

header nav ul li {
display:block;
float: left;
}

header nav ul li a {
display:inline-block;
height:48px;
line-height:48px;
text-decoration: none;
color: white;
font-weight:normal;
font-size:16px;
}

header nav ul li a:hover {
color: #09b497;
text-shadow:2px 2px 2px #000;
}


/* NESTED MENU OPTIONS */

header nav ul li ul {
position:absolute;
float: left;
visibility: hidden;
top:40px;
height:auto;
border:2px solid #0a7c6c;
background-color:#FFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}

header nav ul li:hover ul  {
visibility: visible;
}

header nav ul li ul li {
display:block;
height:30px;
float:left;
clear:left;
}

header nav ul ul li a{
padding: 0 12px;
line-height:30px;
text-align:left;
font-size:14px;
color:#0a7c6c;
}

header nav ul ul li a:hover{
color: #09b497;
text-shadow:none;
}

1 Ответ

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

Добавьте position:relative к вашему header nav ul li. У вашего header nav ul li ul позиция установлена ​​на абсолютное значение, поэтому оно должно быть абсолютным по отношению к своему родителю.

Забыл добавить, вам также нужно добавить ширину к header nav ul li ul или хотя бы минимальную ширину.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...