SHUstriK's Content - Учим делать сайты. Форум про HTML, CSS и JavaScript

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

SHUstriK replied to SHUstriK's question in HTML Coding

Сделал div.popup li { display: block !important; float: none; } и список стал вертикальным. спасибо =) Хотя данное меню не работает в IE =( Склоняюсь к использованию purecssmenu

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

SHUstriK replied to SHUstriK's question in HTML Coding

Всем большое спасибо за помощь, завтра обязательно попробую Ваши варианты. К слову, если проблема во float:left, какой float поставить на li во внутреннем списке, чтобы было вертикально?

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

SHUstriK posted a question in HTML Coding

Есть сайт 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 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; } /********** Конец **************/

Sign In

SHUstriK

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Everything posted by SHUstriK

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

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

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

Forums

Important Information