Помогите с сочитанием горизонтальных и вертикальных списков (ul li)

SHUstriK · January 13, 2010

Есть сайт http://www.microsoft.com/web/platform/default.aspx

Пытаюсь перерисовать его дизайн.

Основное горизонтальное (чёрное) меню удалось, по нажатию на кнопку сделал popup меню, в котором должен быть выбор элементов - так же сделал через ul и li.

Но этот выбор никак не хочет вставать вертикально! Копирую часть кода с этим списком в отдельный htm, там он вертикально. С помощью fireBug'а сравниваю css свойства в обоих файлах у этих ul и li - одинаковы (display: block !important).

При этом смотрю свойства li горизонтального меню - там display: list-item, а не inline.

Помогите поднять второстепенный список вертикально.

Так же не понимаю как microsoft положил список горизонтально не используя display: inline

index.htm

<html>
  <head>
	<link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
	<div id="container">
	  <div id="container-inner">
		<div id="header">
		  <img class="brand" alt="TIMS 2.0" src="logo.png"/>
		  <div class="search-main">
		<div class="search-box">
			  <input type="image" src="search-btn.jpg" title="Поиск" />
		  <input type="text"/>
		</div>
		  </div>
		</div>
		<div id="nav">
		  <div id="navigation">
<!--  Эти ХХХ div'ов для того, чтобы нарисовать скругление меню справа и слева  -->
		<div id="PrimaryNavLeft">
		  <div id="PrimaryNavRight">
		<div id="pri" class="PrimaryNav">
		  <ul id="idMenu" class="Menu">
			<li>
			  <a onclick="document.getElementById('menu_city_popup').style.visibility='visible'; return false;" href="/">
			<span class="Menu-left"> </span>
			Города
			<span class="Menu-right"> </span>
			  </a>
			  <div id="menu_city_popup" class="popup" style="overflow: auto; position: absolute; visibility: hidden; left: -4px; width: 120px; height: 205px; cursor: default; top: 38px;">
			<ul>
			  <li><input type="checkbox"/>1</li>
			  <li><input type="checkbox"/>2</li>
			  <li><input type="checkbox"/>3</li>
			  <li><input type="checkbox"/>4</li>
			  <li><input type="checkbox"/>5</li>
			</ul>
			  </div>			  
			</li>
			<li>
			  <a onclick="document.getElementById('menu_city_popup').style.visibility='visible'; return false;" href="/">
			<span class="Menu-left"> </span>
			Тест
			<span class="Menu-right"> </span>
			  </a>
			</li>
		  </ul>
		</div>
		  </div>
		</div>
		<div id="secondary_nav">
		</div>
	  </div>
		</div>
		<div id="content">
		</div>
	  </div>
	</div>
  </body>
</html>

style.css

/****************************
 CSS RESET
Данный код позволяет привести
вид "по умолчанию" к единому
пригодному нам виду
****************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

h1,h2,h3,h4,h5 {
	font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Follows MSCOM Typography Guidelines */
}

h1 sup,
h2 sup,
h3 sup,
h4 sup
{
	vertical-align: text-top;
	font-size: 0.65em;
	font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Updated */
}
/********** Конец **************/


/***************************
 Layout
***************************/
html {
	background: #e6e6e6 url('bkg-html.jpg') repeat-x;
	height: 100%;
	width: 100%;
}

body {
	background: transparent url('bkg-blue.png') no-repeat right top;
	height: 100%;
	width: 100%;
	font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Follows MSCOM Typography Guidelines */
	color: #4b4b4b;
	font-size: 0.71em; /* Follows MSCOM Typography Guidelines */
}

#container {
	width: 969px;
	margin: 0px auto 0px auto;
	background: transparent url('bkg-shadow.png') no-repeat center 53px;
}

#container-inner {
	width: 945px;
	margin: 0px auto 0px auto;
}

#content {
	border-left: 1px #e5e5e5 solid;
	border-right: 1px #e5e5e5 solid;
	background-color: #FFFFFF;
	margin: 0px auto 0px auto;
	width: 943px;
}

#header {
	height: 75px;
	position: relative;
}

#header .brand {
	position: absolute;
	top: 30px;
	left: 0px;
}

.search-main 
{
	position: absolute;
	top: 13px;
	right: 0px;
	width: 700px;
}

.search-main .search-box 
{
	margin: 11px 0px 0px 0px;
}

.search-main .search-box input[type="text"] 
{
	width:250px;
	margin: 0px;
	float: right;
	padding: 2px;
}

.search-main .search-box input[type="image"] 
{
	float: right;
	border-width: 0px;
}
/********** Конец **************/

/***************************
 Navigation
***************************/

#nav {
	height: 73px;
	font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Follows MSCOM Typography Guidelines */
}

.PrimaryNav
{
	position: relative;
	height: 38px;
	background: black url(menu-middle.jpg) left top repeat-x;
}

.PrimaryNav,
.PrimaryNav ul
{
	width: 937px;
}

.PrimaryNav ul li
{
	background: transparent url(menu-divider.jpg) right top no-repeat;
}

.PrimaryNav ul li a,
.PrimaryNav ul li span
{
	padding: 10px 6px 5px 6px;
	margin: 3px 10px 2px 10px;
	position: relative;
	display: block;
	height: 18px;
	white-space: nowrap;
	font-size: 12px;
	color: White;
}

.PrimaryNav ul li a:hover
{
	background: url(menu-selected-middle.jpg) left top repeat-x;
}

.PrimaryNav ul li a span,
.PrimaryNav ul li a:hover span,
.PrimaryNav ul li span span
{
	text-decoration: none !important;
}

.PrimaryNav ul li a span.Menu-left,
.PrimaryNav ul li a span.Menu-right,
.PrimaryNav ul li span span.Menu-left,
.PrimaryNav ul li span span.Menu-right
{
	position: absolute;
	top: 0;
	width: 4px;
	font-size: 1px;
	padding: 0;
	margin: 0;
}

.PrimaryNav ul li a span.Menu-left,
.PrimaryNav ul li span span.Menu-left,
.PrimaryNav ul li a span.Menu-right,
.PrimaryNav ul li span span.Menu-right
{
	height: 33px;
}

.PrimaryNav ul li a span.Menu-left,
.PrimaryNav ul li span span.Menu-left
{
	left: -4px;
}

.PrimaryNav ul.MenuSelected li a span.Menu-right,
.PrimaryNav ul.MenuSelected li span span.Menu-right
{
	background: url(menu-selected-right.jpg) left top no-repeat;
}

.PrimaryNav ul li a span.Menu-right,
.PrimaryNav ul li span span.Menu-right
{
	right: -4px;
}

.PrimaryNav ul.MenuSelected li a span.Menu-left,
.PrimaryNav ul.MenuSelected li span span.Menu-left
{
	background: url(menu-selected-left.jpg) left top no-repeat;
}

.PrimaryNav ul li a,
.PrimaryNav ul li span
{
	padding: 10px 6px 5px 6px;
	margin: 3px 10px 2px 10px;
}


#PrimaryNavLeft
{
	position: relative;
	padding-left: 4px;
	background: black url(menu-left.jpg) left top no-repeat;
	z-index: 1000;
	font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Follows MSCOM Typography Guidelines */
}
#PrimaryNavRight
{
	position: relative;
	padding-right: 4px;
	background: black url(menu-right.jpg) right top no-repeat;
}


ul.Menu 
{
	position: relative;
}

ul.Menu, 
ul.Menu ul
{
	margin: 0;
	padding: 0;
	display: block;

}

ul.Menu li
{
	position: relative;
	list-style: none;
	float: left;
	color: White;
}
ul.Menu li a,
ul.Menu li span
{
	display: block;
	text-decoration: none;
}
ul.Menu.MenuSelected
{

}

div.popup
{
	background-color:#FFFFFF;
	border:1px solid #B8B8B8;
	overflow:auto;
	z-index:1;
}

div.popup ul
{
	width: 120px;
	display: block !important;
}
div.popup li
{
	display: block !important;
}

div.popup ul li
{
	list-style: none;
	color: Black;
	background: none;
	white-space: no wrap;
	position: static;
}

/********** Конец **************/

AKyHuH · January 13, 2010

честно говоря, такое чувство что микрософт пользуется пэйджмейкером для создания страничек, т.к. коды у них какие-то нереальные...

ИМХО, не советую в эти дебри лезть, т.к. намного проще самому сделать выпадающее меню...

AKyHuH · January 13, 2010

честно говоря поковыряв 5 минут так и не допер в чем там косяк, но решение нашел...

выглядит оно вот так:

div.popup li
{
	display: block !important;
	clear: both;
}

поковыряв ещё 2 минуты пришел к выводу, что косяк вот тут:

ul.Menu li
{
	position: relative;
	list-style: none;
	float: left;
	color: White;
}

а именно в float: left которое применяется ко всем li внутри ul.Menu, а ваш выпадающий список также получается попадает по это правило и никакой display: block тут не поможет, ибо блоки замечательно следуют правилам обтекания в том числе и float: left;

Justnewone · January 13, 2010

не говоря уж про то что при флоате и так автоматом назначается display:block. Причина наверное в том, что где-то еще более сильный селектор переопределяет.

AKyHuH · January 13, 2010

не говоря уж про то что при флоате и так автоматом назначается display:block. Причина наверное в том, что где-то еще более сильный селектор переопределяет.

ну, можно и так сказать

SHUstriK · January 13, 2010

Всем большое спасибо за помощь, завтра обязательно попробую Ваши варианты.

К слову, если проблема во float:left, какой float поставить на li во внутреннем списке, чтобы было вертикально?

SHUstriK · January 14, 2010

Сделал

div.popup li
{
	display: block !important;
	float: none;
}

и список стал вертикальным. спасибо =)

Хотя данное меню не работает в IE =( Склоняюсь к использованию purecssmenu

Edited January 14, 2010 by SHUstriK

Sign In

Помогите с сочитанием горизонтальных и вертикальных списков (ul li)

Question

SHUstriK

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

AKyHuH

Link to comment

Share on other sites

AKyHuH

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

AKyHuH

Link to comment

Share on other sites

SHUstriK

Link to comment

Share on other sites

SHUstriK

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information