Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Перезагрузить страницу Позиционирование элементов (перекрытие выпадающие меню)
Регистрация

Восстановить пароль		 Повторная активизация e-mail
Регистрация Задать
вопрос		 Заплачу
за решение		 Новые
сообщения 		Сообщения
за день 		Расширенный
поиск		 Правила Всё
прочитано

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.08.2013, 16:24   #1
vvef
Новичок
Джуниор
 
Регистрация: 26.04.2011
Сообщений: 2
Лампочка Позиционирование элементов (перекрытие выпадающие меню)
Вложенные (выпадающие) элементы меню перекрывает контент. Не могу понять, где проблема.

Вот страница sensoptika.com.ua/csshelp/sos.htm

Код HTML:
<ul class="VMmenu">
    <li class="dir" >
    <a href="" >Уровень 1</a>         
        <ul class="menu">         
            <li class="dir">
                <a href="" >Уровень 2</a>               
					<ul class="menu">      
						<li>
							<a href="" >Уровень 3</a>                  
						</li>
					</ul>
            </li>     
            <li >
                <a href="" >Уровень 2</a>                  
			</li>
            <li >
                <a href="" >Уровень 2</a>                  
			</li>
            <li class="dir">
                <a href="" >Уровень 2</a>               
					<ul class="menu">
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
					</ul>
            </li>
                        
            <li >
				<a href="" >Уровень 2</a>                  
			</li>
            <li >
				<a href="" >Уровень 2</a>                  
			</li>
            <li >
				<a href="" >Уровень 2</a>                  
			</li>
            <li class="dir">
				<a href="" >Уровень 2</a>               
					<ul class="menu">
					<li >
                        <a href="" >Уровень 3</a>               
					</li>
                        
                    <li >
                        <a href="" >Уровень 3</a>              
					</li>
					</ul>
            </li>
            <li >  
                <a href="" >Уровень 2</a>                
			</li>
      
        </ul>
    </li>
    <li class="dir" >
    <a href="" >Уровень 1</a>         
		<ul class="menu">
            <li class="dir">
                <a href="" >Уровень 2</a>               
					<ul class="menu">
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
						<li >
							<a href="" >Уровень 3</a>                 
						</li>
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
					</ul>
            </li>
			<li class="dir">
                <a href="" >Уровень 2</a>               
					<ul class="menu">
						<li >
							<a href="" >Уровень 3</a> 
						</li>
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
						<li >
                        <a href="" >Уровень 3</a>                 
						</li>
					</ul>
            </li>
        </ul>
    </li>    
</ul>
Код HTML:
ul.VMmenu {
 width: 800px; /* Ширина меню Virtuemart */
 margin: 0px 10px 0 0;
 background: url(../../images/default/br-menu.png) no-repeat top right;
}

.VMmenu li a {
padding: 0 23px 0 10px;
text-decoration: none;
position: relative;
font-family: Arial;
font-weight: normal;
line-height: 42px;
color: #000; /* оригінал #eee */
font-size: 14px;
text-transform: uppercase;
}

ul.VMmenu li {
   line-height: 1.3em;
   vertical-align: middle;
   zoom: 1;
   display: inline-block;
}

ul.VMmenu li.hover,
ul.VMmenu li:hover {
   position: relative;
   z-index: 9998;
   cursor: default;
   background-color: white;
}

ul.VMmenu ul {
   visibility: hidden;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 9999;
   width: 100%;
   background-color: white;
}

ul.VMmenu ul ul {
   top: 1px;
   left: 99%;
}

ul.VMmenu li:hover > ul {
   visibility: visible;
}

ul.VMmenu ul {
 top: 1px;
 left: 99%;
}
vvef вне форума Ответить с цитированием
Старый 23.08.2013, 11:12   #2
romahjvf
Пользователь
 
Регистрация: 19.07.2011
Сообщений: 18
Радость
Здраствуйте.
Вставьте код вместе с Вашим контентом.
Вот что у меня получилось.

Код HTML:
<ul class="VMmenu">
    <li class="dir" >
    <a href="" >Уровень 1</a>         
        <ul class="menu">         
            <li class="dir">
                <a href="" >Уровень 2</a>               
					<ul class="menu">      
						<li>
							<a href="" >Уровень 3</a>                  
						</li>
					</ul>
            </li>     
            <li >
                <a href="" >Уровень 2</a>                  
			</li>
            <li >
                <a href="" >Уровень 2</a>                  
			</li>
            <li class="dir">
                <a href="" >Уровень 2</a>               
					<ul class="menu">
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
					</ul>
            </li>
                        
            <li >
				<a href="" >Уровень 2</a>                  
			</li>
            <li >
				<a href="" >Уровень 2</a>                  
			</li>
            <li >
				<a href="" >Уровень 2</a>                  
			</li>
            <li class="dir">
				<a href="" >Уровень 2</a>               
					<ul class="menu">
					<li >
                        <a href="" >Уровень 3</a>               
					</li>
                        
                    <li >
                        <a href="" >Уровень 3</a>              
					</li>
					</ul>
            </li>
            <li >  
                <a href="" >Уровень 2</a>                
			</li>
      
        </ul>
    </li>
    <li class="dir" >
    <a href="" >Уровень 1</a>         
		<ul class="menu">
            <li class="dir">
                <a href="" >Уровень 2</a>               
					<ul class="menu">
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
						<li >
							<a href="" >Уровень 3</a>                 
						</li>
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
					</ul>
            </li>
			<li class="dir">
                <a href="" >Уровень 2</a>               
					<ul class="menu">
						<li >
							<a href="" >Уровень 3</a> 
						</li>
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
						<li >
							<a href="" >Уровень 3</a>                  
						</li>
						<li >
                        <a href="" >Уровень 3</a>                 
						</li>
					</ul>
            </li>
        </ul>
    </li>    
</ul>

<div class="content">
	<p>content</p>
</div>
Код HTML:
body{
margin: auto;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
line-height:1,5em;
width:1036px;
}

ul.VMmenu {
 width: 800px; /* Ширина меню Virtuemart */
 margin: 0px 10px 0 0;
 background: url(../../images/default/br-menu.png) no-repeat top right;
}

.VMmenu li a {
padding: 0 23px 0 10px;
text-decoration: none;
position: relative;
font-family: Arial;
font-weight: normal;
line-height: 42px;
color: #000; /* оригінал #eee */
font-size: 14px;
text-transform: uppercase;
}

ul.VMmenu li {
   line-height: 1.3em;
   vertical-align: middle;
   zoom: 1;
   display: inline-block;
}

ul.VMmenu li.hover,
ul.VMmenu li:hover {
   position: relative;
   z-index: 9998;
   cursor: default;
   background-color: white;
}

ul.VMmenu ul {
   visibility: hidden;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 9999;
   width: 100%;
   background-color: white;
}

ul.VMmenu ul ul {
   top: 1px;
   left: 99%;
}

ul.VMmenu li:hover > ul {
   visibility: visible;
}

ul.VMmenu ul {
 top: 1px;
 left: 99%;
}

.content{
	background-color: red;
	height: 50px;
}
Не судите строго, я совсем недавно начал заниматься HTML и CSS.
romahjvf вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
позиционирование меню Morgusha HTML и CSS 5 21.06.2013 13:53
кнопки и выпадающие меню datgen HTML и CSS 1 18.11.2012 00:24
выпадающие меню Doodle Помощь студентам 1 24.09.2012 00:35
Выпадающие меню в DBCombobox Karl_Karlovi4 Общие вопросы Delphi 0 10.01.2012 10:21
Выпадающие меню в DataGridView ds.Dante Общие вопросы .NET 2 14.09.2009 17:57

Реклама на форуме - Обратная связь - Правила - Исходники Delphi - Справочник Delphi - Архив - Вверх