Небольшие проблемы с горизонтальным раскрывающимся меню

  • Автор темы postname
  • 57
  • Обновлено
  • 18, May 2024
  • #1
Привет, ребята! Счастливых праздников! В последнее время я особо не приставал, потому что пытался применить на практике то, чему научился здесь, и, кажется, все идет довольно хорошо, за одним исключением.

. . Я пытаюсь включить центрированное горизонтальное раскрывающееся меню в сайт, и, возможно, я слишком долго возился с этим сайтом, но я не могу понять, что я делаю неправильно, превращая горизонтальное меню в раскрывающееся меню.

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

В любом случае, если вы взглянете на мой код и сообщите мне, что я делаю неправильно, я буду очень признателен. Я думаю, что затронутый html выглядит так:
 

#navMenuCheck {

position:absolute;

left:-999em;

}

#navMenu {

width: 1265px;

position: relative;

margin: 3.9em 0 0 2em;

padding: 2.5em 0 0.75em 0.75em;

height: 0.1em;

text-align: center;

background: #65656B;

}

#navMenu li {

list-style:none;

display:inline-block;

width: 12em;

margin-top: -3em;

}

#navMenu a {

display: inline-block;

vertical-align: bottom;

text-decoration: none;

font-size: 1.25em;

color: #38E7F0;

padding: 0 0.5em 0 0.5em;

line-height: 3em;

}

#navMenu a.current {

color:#AEF;

}

#navMenu a:active,

#navMenu a:focus,

#navMenu a:hover {

width: 90%;

color:#FFF;

font-weight: bold;

}

#navMenu a:after {

display:inline-block;

padding:0 0.1em 0 0.5em;

color:#FFF;

}

#navMenu .lastInSet a:after {

display:none;

}

#navMenu .setBreak {

padding-right:8em;

}

#navMenu a:after,

#navMenu:after,

#navMenu ul:before,

#navMenu ul:after {

color: #FFF;

font-family: arial,helvetica,sans-serif;

}

#navMenu:after,

#navMenu ul:before,

#navMenu ul:after {

position:absolute;

left:50%;

width:3em;

bottom:0.65em;

}

#navMenu:after {

bottom:0.2em;

font-size:150%;

margin-left:-1.5em;

}

#navMenu ul:before {

margin-left:-3em;

}

Код (разметка): Код navMenu выглядит так:
  <input type="checkbox" id="navMenuCheck"> <label for="navMenuCheck"></label> <div id="navMenu"> <ul> <li> <a href="/">Home</a> </li><li> <a href="/">All Categories</a> <ul> <li> <a href="#">Electronics</a> </li><li> <a href="#">Computers & Networking</a> </li><li> <a href="#">Flashlights & Lamps</a> </li><li> <a href="#">Cell Phones & Accessories</a> </li><li> <a href="#">Automotive</a> </li> </ul> </li><li> <a href="/">New Arrivals</a> </li><li> <a href="/">Top Sellers</a> </li><li> <a href="/">Clearance</a> </li><li> <a href="/">Steals & Deals</a> </li><li> <a href="/">Contact Us</a> </li> </ul> <!-- end navMenu --></div> 
Код (разметка): И CSS выглядит так:
  <div class="heightWrapper"> <?php include("navMenu.php"); ?> <div id="contentWrapper"> <div id="products"> 
Код (разметка): Если это полезно, вы можете просмотреть страницу test.allvixen.com/index.php. Моя благодарность за вашу помощь в этом.

. .

postname


Рег
01 Jan, 2011

Тем
1

Постов
1

Баллов
11
  • 22, May 2024
  • #2
Приведенная выше ссылка на код, предоставленная Скрытая информация :: Авторизуйтесь для просмотра »
, будет абсолютно соответствовать вашим требованиям. В основном в HTML есть 6 типов позиций. Они есть статический, относительный, абсолютный, фиксированный, начальный и наследуемый. Положение по умолчанию любого объекта в DOM HTML: статический. Родственник объект расположен относительно своего нормального положения. Абсолютный — это объект, позиционированный относительно своего объекта-предка. Зафиксированный объект, расположенный относительно окна браузера. Исходный объект возвращается в положение по умолчанию и, наконец, наследовать объект наследует позицию своего родительского объекта.

По сути, позиция используется в HTML только для размещения одного объекта на другом.

Но использование большего количества позиций иногда приводит к проблемам в IE. Поэтому мой совет: старайтесь как можно больше обходиться с поплавками.

Надеюсь, эта информация поможет вам.
 

otkudaikuda


Рег
01 Jan, 2011

Тем
0

Постов
2

Баллов
2
  • 07, Jun 2024
  • #3
Большое спасибо за советы и предложения. Я буду продолжать работать над этим, пока не выясню все это. Как только я закончу все страницы, я постараюсь выяснить, как сделать меню отзывчивым. Со страницами разобрался, дальше займусь меню. Спасибо . . .
 

MistaGreen


Рег
01 Jan, 2011

Тем
0

Постов
3

Баллов
3
  • 10, Jun 2024
  • #4
Не уверен на 100%, что вы пытаетесь сделать, я предполагаю что-то вроде этого:
http://codepen.io/anon/pen/ZBwejp

Вы хотите добавить позицию: относительно родительского li и позицию: абсолютную в дочернем списке. Позиционирование — это самая сложная вещь CSS для объяснения, возможно, кто-то другой сможет сделать это лучше.
 

Nelegal1


Рег
01 Jan, 2011

Тем
0

Постов
3

Баллов
3
Тем
49554
Комментарии
57426
Опыт
552966

Интересно