как сделать так, чтобы подменю отображалось правильно

Я пытаюсь создать подменю для строки меню и установил для подменю значение absolute positioning, но отображение подменю не отображается ниже списка родительского меню. Оно появляется в статическое положение (то же место) для всех подменю списка меню;

jsfiddle

однако, когда я устанавливаю для всех списков меню значение float : left, подменю работает, но я не хочу устанавливать float: left для списков меню.

jsfiddle-after-setting-float-left

как сделать так, чтобы подменю отображалось правильно, не меняя float:left для списка меню.


list menu html css
person Siva Kannan    schedule 20.10.2015    source источник
comment
пожалуйста, также (всегда) включайте сюда соответствующие части кода   -  person caramba    schedule 20.10.2015
comment
Вы должны просто взять то, что вам нужно: bootsnipp.com/tags/menu   -  person eran otzap    schedule 20.10.2015

Ответы (2)


arrow_upward
1
arrow_downward

Обновленный Jsfiddle http://jsfiddle.net/sachinkk/fyv8gjer/10/

#menu-button{
	display:none;
	text-align: center;
}

.menu-bar{
	float : left;
	width : 100%;
	background-color: #00467f;
}


.menu-bar ul {
	text-align:center;
	background-color: #00467f;
    list-style-type: none;
}


.menu-bar li{
	cursor: pointer;
    display: inline;
    padding-left :1%;
    padding-right: 1%;
    position:relative;
}
.menu-bar li a{
	color : white;
	text-decoration: none;
}

.active-menu{
	background-color: #4D9C37;
	padding-top : 0.5%;
	padding-bottom:0.5%;
	border-radius : 4px; 
}

.menu-bar li ol {
    position : absolute;/********if this position is relative the menu collapses*******/
    top:15px;
    left:0px;
    border:1px solid #e7e7e7;
    display:none;
    background:#fff;
}
.menu-bar li ol a {
color : silver;
}
.menu-bar li:hover ol{
    display:block;
}
	<div class="menu-bar">
		<ul>
			<li id="menu-button"><a>MENU</a></li>
			<div id="menu-pages">
				<li class="active-menu"><a href="#">HOME</a>
				</li>
				<li><a href="#">PRODUCTS & SERVICES</a>
                    <ol><!--submenu-->
						<li><a href="#">PRODUCTS</a></li>
						<li><a href="#">SERVICES</a></li>
				    </ol>
                </li>
				<li><a href="#">EVENTS & ACTIVITIES</a>
                    <ol><!--submenu-->    
						<li><a href="#">events</a></li>
						<li><a href="#">activities</a></li>
					</ol>
                </li>
				<li><a href="#">ABOUT US</a></li>
				<li><a href="#">CAREERS</a></li>
				<li><a href="#">CONTACT US</a></li>
			</div>
		</ul>
	</div>

person Sachink    schedule 20.10.2015
comment
не могли бы вы рассказать мне, почему задано значение left: 0px и какое значение по умолчанию было для left: 0px для списка подменю и почему это требуется? - person Siva Kannan; 20.10.2015
comment
Мы сообщаем браузеру, где именно мы хотим разместить внутренний (absolute) элемент по отношению к внешнему (relative) элементу. Это делается с помощью четырех возможных свойств: top, bottom, left и right. Достаточно использовать два свойства. Внутренний элемент по умолчанию начинается в верхнем левом углу внешнего элемента. - person Sachink; 20.10.2015

arrow_upward
1
arrow_downward

Добавьте position: relative; к .menu-bar li

Демонстрационная ссылка http://jsfiddle.net/fyv8gjer/4/

person Lalji Tadhani    schedule 20.10.2015