Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.02.2017, 18:58
Новичок на форуме
Отправить личное сообщение для Digo Посмотреть профиль Найти все сообщения от Digo
 
Регистрация: 21.02.2017
Сообщений: 6

css выпадающее меню
Здравствуйте,

при таком порядке ul li не работает (листинг внизу)
ul.nav li ul {
display: none; /*скрываем вложенные пункты*/
}

работает при порядке
<ul>
<li>
<ul>
....
</ul>
</li>
</ul>

можно подстроить стили чтобы работало в текущем порядке стилей? Меню генерируется сторонним скриптом и нет большого желания лезть в него.

<style>

/* Вертикальное выпадающее меню*/
body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ширина блока меню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
 
/*Выпадающее меню*/
 
ul.nav li:hover {
  /* позиционирование вложенных элементов
   * будет расчитыватьться относительно
   * родительского элемента
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Задаём координаты для вложенных пунктов*/
  left: 150px; /*меню раскрывается вправо*/
}
</style>

<ul class="nav">
	<li><a href="#">Главная категория</a></li>
	<ul  id="c1">
		<li><a href="#">Подкатегория 1</a></li>
	
		<ul id="c2">
			<li><a href="#">Подкатегория 1.1</a></li>
			<ul  id="c3">
				<li><a href="#">Подкатегория 1.1.1</a></li>
				<li><a href="#">Подкатегория 1.1.2</a></li>
			</ul>
			<li><a href="#">Подкатегория 1.2</a></li>
		</ul>
		
		<li><a href="#">Подкатегория 2</a></li>
		
		<ul  id="c7">
			<li><a href="#">Подкатегория 2.1</a></li>
			<li><a href="#">Подкатегория 2.2</a></li>
		</ul>	

	</ul>
</ul>
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2017, 19:07
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

https://jsfiddle.net/BlackStar1991/h94zjxtj/ Так что ли?
Ответить с цитированием
  #3 (permalink)  
Старый 22.02.2017, 10:15
Новичок на форуме
Отправить личное сообщение для Digo Посмотреть профиль Найти все сообщения от Digo
 
Регистрация: 21.02.2017
Сообщений: 6

оно должно все раскрываться, т.е. в 1.1 пункте должны выпадать пункты 1.1.1 и 1.1.2 а сейчас все скопом, можно даже пусть главная категория и подкатегория 1, подкатегория 2 и т.д. сразу видны.
Ответить с цитированием
  #4 (permalink)  
Старый 22.02.2017, 21:03
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

оно должно все раскрываться == а сейчас все скопом.
Я не понял что имеется ввиду.
Согласно здравой логике, возможно вы имели ввиду это?
https://jsfiddle.net/BlackStar1991/h94zjxtj/3/
Ваша главная ошибка что вы не правильно составляете многоуровненый список + забудьте про id селектор
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2017, 13:35
Новичок на форуме
Отправить личное сообщение для manisha Посмотреть профиль Найти все сообщения от manisha
 
Регистрация: 27.03.2017
Сообщений: 1

css for dropdown
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2017, 17:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

manisha,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающее меню (костыли) Sk1LL Общие вопросы Javascript 4 06.02.2016 12:47
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Выпадающее меню на css и javascript Jackky Общие вопросы Javascript 3 13.09.2008 18:30