← Комьюнити

Как сделать выпадающее меню списком?

Алексей Оборин2 ответов
#html#css

Всем, доброго времени суток!

Люди, помогите пожалуйста. Не понимаю как сделать вложенное меню вертикальным.

Заранее спасибо!

<body>

	<div class="header">
		
		<nav class="menubar">
			
			<ul class="menu">
				<li class="selected"><a href="#">Главная</a></li>
				<li><a href="#">Фильмы</a>

					<ul class="menu-under">
						
						<li><a href="#">Самое главное</a></li>
						<li><a href="#">Очень главное</a></li>
						<li><a href="#">Капец главное</a></li>

					</ul>

				</li>
				<li><a href="#">Сериалы</a></li>
				<li><a href="#">Рейтинг фильмов</a></li>
				<li><a href="#">Контакты</a></li>
			</ul>

		</navv>

	</div>
		
</body>


CSS

* {
	padding: 0;
	margin: 0;
} 

.header {
	background-color: green;
	height: 177px;
}

.menubar {
	width: 900px;
	height: 46px;
}

ul.menu {
	float: right;
}

ul.menu li {
	float: left;
	padding: 10px 0 0 9px;
	list-style: none;
	margin: 1px 2px 0 0;
}

ul.menu li a {
	font: normal 100% 'trebuchet ms', sans-serif;
	display: block;
	height: 20px;
	padding: 6px 35px 5px 28px;
	color: #fff;
	text-decoration: none;
}

ul.menu li.selected a {
	color: #aeb002;
}

ul.menu li a:hover {
	color: #e4ec05;
}

ul.menu ul {
	display: none;
	position: absolute;
}

ul.menu li:hover ul {
	display: block;
}

ul.menu li:hover li {
	display: block;
}

ul.menu {
	position: relative;
	margin: 0;
	padding: 40px 0 0 0;
}

2 ответов

Как вариант так:

HTML

<h1>Vertical Submenu</h1>
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
</ul>
</nav>

CSS

#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

https://jsfiddle.net/rrub99sy/

student_aPnalwdy

Спасибо. 

Алексей Оборин

Ваш ответ

Войдите, чтобы ответить