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

Question

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

0

Итак, у меня есть строка меню veritcal, расположенная справа от страницы, однако я не хочу, чтобы подменю пересекалось на главном div (синий фон).

Я создал ссылку для скрипта JS, чтобы показать это яснее: http://jsfiddle.net/uzeZ6/

в настоящее время строка меню переполняется на главный div. Как остановить это?

Спасибо

HTML

<div id="top">
<div id="nav">
<ul> 
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>

<ul> 
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>

<ul> 
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>

<ul> 
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>

</div> 
</div>

<div id ="main">text goes here
</div>

CSS

@charset"utf-8";
#top {
background-color: #CCC;
padding: 0px;
height: 150px;
width: 640px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;}
#top #nav {
margin: 0px;
padding: 0px;
}
#top #nav ul {
margin: 0px;
padding: 0px;
}
#top #nav ul li {
background-color: #666;
float: left;
position: relative;
border: 1px solid #000;
list-style-type: none;
}
#top #nav ul li:hover ul {
visibility: visible;
left: -152px;
top: -1px;
}
#top #nav ul li a {
font-size: 14px;
color: #FFF;
line-height: 30px;
text-decoration: none;
display: block;
height: 30px;
width: 150px;
}
#top #nav ul li ul {
position: absolute;
visibility: hidden;
}
#nav {
background-color: #333;
padding: 0px;
float: right;
height: 150px;
width: 180px;
}
#main {
height: 300px;
width: 640px;
background-color: #00F;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Supernovaaa 30 нояб. 2013, в 23:25

Источник

Теги:

html

css

menu

jsfiddle

1 ответ

Ещё вопросы

Nabbit · Accepted Answer · 2013-12-01T01-05-00.000Z

Здесь скрипта JS: http://jsfiddle.net/yE8ae/

Вы можете отрегулировать позицию по своему желанию, изменив bottom значение в этих строках:

#top #nav ul:nth-child(3) li:hover ul { 
    top: initial; bottom: -33px;
}

#top #nav ul:nth-child(4) li:hover ul { 
    top: initial; bottom: -1px;
}

HTML

<div id="top">
    <div id="nav">
        <ul>
            <li><a href "#">Test 1</a>

                <ul>
                    <li><a href "#">Test 1, Link 1</a>
                    </li>
                    <li><a href "#">Test 1, Link 2</a>
                    </li>
                    <li><a href "#">Test 1, Link 3</a>
                    </li>
                </ul>
        </ul>
        </li>
        <ul>
            <li><a href "#">Test 2</a>

                <ul>
                    <li><a href "#">Test 2, Link 1</a>
                    </li>
                    <li><a href "#">Test 2, Link 2</a>
                    </li>
                    <li><a href "#">Test 2, Link 3</a>
                    </li>
                </ul>
        </ul>
        </li>
        <ul>
            <li><a href "#">Test 3</a>

                <ul>
                    <li><a href "#">Test 3, Link 1</a>
                    </li>
                    <li><a href "#">Test 3, Link 2</a>
                    </li>
                    <li><a href "#">Test 3, Link 3</a>
                    </li>
                </ul>
        </ul>
        </li>
        <ul>
            <li><a href "#">Test 4</a>

                <ul>
                    <li><a href "#">Test 4, Link 1</a>
                    </li>
                    <li><a href "#">Test 4, Link 2</a>
                    </li>
                    <li><a href "#">Test 4, Link 3</a>
                    </li>
                </ul>
        </ul>
        </li>
    </div>
    <p>&nbsp;</p>
</div>
<div id="main">text goes here</div>

CSS

@charset"utf-8";
 #top {
    background-color: #CCC;
    padding: 0px;
    height: 150px;
    width: 640px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#top #nav {
    margin: 0px;
    padding: 0px;
}
#top #nav ul {
    margin: 0px;
    padding: 0px;
    float: left;
}
#top #nav ul li {
    background-color: #666;
    float: left;
    position: relative;
    border: 1px solid #000;
    list-style-type: none;
    cursor: pointer;
}
#top #nav ul li:hover ul {
    display: block;
}

#top #nav ul:nth-child(3) li:hover ul { 
    top: initial; bottom: -33px;
}

#top #nav ul:nth-child(4) li:hover ul { 
    top: initial; bottom: -1px;
}


#top #nav ul li a {
    font-size: 14px;
    color: #FFF;
    line-height: 30px;
    text-decoration: none;
    display: block;
    height: 30px;
    width: 150px;
}
#top #nav ul li ul {
    position: absolute;
    display: none;
    right: 151px;
    top: -1px;
}
#nav {
    background-color: #333;
    padding: 0px;
    float: right;
    height: 150px;
    width: 180px;
}
#main {
    height: 300px;
    width: 640px;
    background-color: #00F;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

Большое спасибо за это, это решило проблему. Спасибо
@ user3053190 Добро пожаловать, я был бы признателен, если бы вы могли пометить ответ как принятый, поскольку он решил проблему. Спасибо.