держать подменю сверху и не допускать перемещения содержимого div и его размера

Question

держать подменю сверху и не допускать перемещения содержимого div и его размера

0

Я следую этому вопросу и отвечу: Подменю, расширяющее родительский div вместо отображения сверху

Если в приведенном выше примере есть div ниже, как вы держите 1), что содержимое div перемещается, и 2) размер div от перемещения, но сохраняйте его отзывчивым?

Например, я развернул скрипт js из ссылки выше и создал div id = "mytest". Я хочу, чтобы меню и "mytest" div были полностью независимы, когда вы наводили курсор на ссылку "Обо мне". Вот моя развилка: http://jsfiddle.net/nXqn8/

Вот код:

    <div id="menu">
        <ul>
            <li><a id="" class="" href="">Home</a></li>
            <li><a id="" class="" href="">About Me</a>
                <ul class="sub-menu">
                    <li><a href="">Biography</a></li>
                    <li><a href="">Photo Galery</a></li>
                    <li><a href="">Foot Print</a></li>
                </ul>
            </li>
            <li><a id="" class="" href="">Expertise</a></li>
            <li><a id="" class="" href="">Projects</a>
                <ul class="sub-menu">
                    <li><a href="">Geo 228 Portal</a></li>
                    <li><a href="">NEP Application</a></li>
                    <li><a href="">Geo Address Book</a></li>
                    <li><a href="">Assets Management</a></li>
                </ul>
            </li>
            <li><a id="" class="" href="">Contact</a></li>
        </ul>
    </div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>

CSS:

#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px; 

}


#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}

#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}

#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
 }

#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}

#menu ul.sub-menu {
display: none;
position: relative;
}

#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}

#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}

#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}

  #menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
 #mytest {
 background-color: red;   
}

В конечном счете, у меня есть что-то вроде главного меню, которое вы видите на вершине com-com-com.

Благодарю!

mountainclimber 17 апр. 2014, в 07:24

Источник

Теги:

javascript

html

css

2 ответа

0

Определите свою position: relative #menu li position: relative и определите свое подменю #menu ul.sub-menu position: absolute; left: 0; top: 100%;

как этот css

#menu li {
    position:relative;
}

#menu ul.sub-menu {
display: none;
    position: absolute;
left: 0;
top: 100%;
}

демонстрация

Rohit Azad 17 апр. 2014, в 03:04

Ещё вопросы

4dgaurav · Accepted Answer · 2014-04-17T04-11-00.000Z

#menu li {
    position:relative;
}

#menu ul.sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
}

#mytest {
    float:left;
    background-color: red;
    width:100%;
    text-align: center;
}

DEMO

это лучший из двух, поскольку меню кажутся полностью адаптивными. Спасибо!!!