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

Привет, ребята! Счастливых праздников! В последнее время я особо не приставал, потому что пытался применить на практике то, чему научился здесь, и, кажется, все идет довольно хорошо, за одним исключением.

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

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

В любом случае, если вы взглянете на мой код и сообщите мне, что я делаю неправильно, я буду очень признателен. Я думаю, что затронутый 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. Моя благодарность за вашу помощь в этом.

. .

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

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

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

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

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

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

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