У меня есть ответ на вашу первую проблему.При выполнении такого рода меню.Я остаюсь как можно дальше от прокладки.Мне проще использовать поля, но для начала давайте посмотрим на страницу, которую я для вас создал:
http://www.albatrossfonts.com/stack/ulbuttons.html
Я объясню этот код ниже.Вот мой HTML:
<div id="wrapper">
<ul class="dropdown">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
</ul>
</div>
И CSS:
.dropdown
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}
.dropdown li a:hover
{
background-color: #333333;
}
Обратите внимание, что я объявил ссылку: вместо просто a.Я также объявил: посещения, так как я хочу, чтобы посещенное состояние было таким же, как исходное состояние.
В записи .dropdown я просто определил ширину для списка (ul) и заставил его отображаться правильно.
В записи .dropdown li я устанавливаю ширину и высоту каждого элемента списка, удаляю маркеры, а также устанавливаю отображение и плавающее отображение, чтобы они отображались в виде ящика.Нет отступов.Просто поле.
В .dropdown li a: link, .dropdown li a: посещенная запись мы по сути дела «заполняем» наши поля элементов списка ссылкой, и так получилось, чтомы также можем определить ссылку как поле.Поэтому я установил размеры ссылки точно такими же, как у нашего li (это то, что делает весь блок кликабельным).Затем установите отображение и плавание, а также цвет фона, а также цвет текста или просто «цвет».
Для того, чтобы поместить текст в центр, вы не должны использовать выравнивание по вертикали.Используйте line-height и установите для него ту же высоту, что и для вашего элемента li.Это отцентрирует ваш текст в поле вертикально.
Чтобы контролировать горизонтальное отображение текста, установите свойство отступа текста, используйте выравнивание текста.В этом примере я использовал text-indent.
Наконец, мы определяем наше состояние a: hover.Важно помнить, что единственное, что вам действительно нужно здесь определить, это любые свойства, которые действительно меняются.В этом случае цвет фона.
Если вы хотите объявить состояние для события нажатия мыши, вы можете сделать что-то вроде:
.dropdown li a:active
{
background-color: #000000;
text-indent: 20px;
}
/////////// Редактировать ////////////
Вот как вы можете использовать один стиль CSS для нескольких меню или дочерних меню.
html для 2-х отдельных ul:
<ul class="dropdown">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
</ul>
<ul class="dropdown">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
</ul>
CSS: (остается тем же, потому что вы назначаете их обоих для класса "выпадающий".
.dropdown
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}
.dropdown li a:hover
{
background-color: #333333;
}
Если вы хотите применить свои стили для дочернего ul, например:
<ul class="dropdown">
<li><a href="#">Button 1</a>
<ul>
<li><a href="#">subButton 1</li>
<li><a href="#">subButton 2</li>
<li><a href="#">subButton 3</li>
</ul>
</li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 1</a></li>
</ul>
Вы просто добавляете свои стили, чтобы включить дочерний ul и child ui li, как показано ниже, где .dropdown фактически представляет ваш первый ulSo. Dropdown (ul) -> li (элемент списка в неупорядоченном списке «выпадающий») -> ul (ul внутри выпадающего списка li) -> li (li внутри выпадающего списка ul li ul)
Извинитеесли это звучит запутанно, но, другими словами, если вы вообще не присваивали класс родительскому элементу ul, то был бы доступ к элементу списка внутри дочернего списка.
.dropdown, dropdown li ul
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li, .dropdown li ul li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited, .dropdown li ul li a:link, .dropdown li ul li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}