надеюсь, что кто-нибудь поможет мне решить эту проблему... я не использую js, только css и html. Я создал меню, которое работает хорошо, но моя проблема заключается в том, что я пытаюсь добавить подменю. Я бы хотел, чтобы он был скрыт, пока кто-то не перейдет к главному меню, а затем я бы хотел, чтобы он выпал. Эффект, который я получаю сейчас, заключается в том, что мое подменю сразу загружается с главным меню над ним, а затем оно исчезает, когда я просматриваю этот пункт главного меню. Я пробовал разные вещи, такие как добавление z-index здесь и там, но пока безуспешно...
HTML:
<div id="container">
<div id="menu">
<ul id="nav">
<ul>
<li id="menu1"><a href=""><h2>Home</h2></a></li>
<li id="menu2"><a href=""><h2>Sign-Up</h2></a></li>
<li id="menu3"><a href=""><h2>Packages</h2></a>
<ul>
<li><a href="#">Gold</a></li>
<li><a href="#">Platinum</a></li>
</ul>
</li>
<li id="menu4"><a href=""><h2>About Us</h2></a></li>
<li id="menu5"><a href=""><h2>Contact</h2></a></li>
</ul>
</ul>
</div>
CSS:
* {
margin:0px;
padding:0px;
}
.form-textbox{
height:100px;
font-size:100px;
}
#fieldset{
width:300px;
}
#fieldst p{
clear:both;
padding:5px;
}
#legend{
font-size:16px;
}
label[for="username"] {
color:#FFFFFF;
font-weight:bold;
clear:both;
text-align:left;
}
label[for="password"] {
color:#FFFFFF;
font-weight:bold;
clear: both;
text-align:left;
margin-top:40px;
}
body {
padding-top:0px;
background-color:#01111d;
color:#FFF;
font-family:verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {
color: #FFF;
font-size: 14px;
}
a:hover {
color:#efae00;
} //01a9c0
.more {
float:left;
}
.clear {
clear:both;
}
p {
margin: 20px 0px 20px 0px;
line-height: 16px;
font-size: 14px;
}
#container {
margin: 0px auto;
width: 873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
z-index:99999;
}
#menu li{
position:absolute;
top:40px;
list-style-type:none;
}
#menu1 {
left:110px;
}
#menu2 {
left:255px;
}
#menu3 {
left:400px;
}
#menu4 {
left:540px;
}
#menu5 {
left:680px;
}
#menu a {
font-family: verdana, arial, sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover {
color:#efae00;
}
#menu li > #nav li ul
#nav li ul {
position:absolute;
display:none;
}
#nav li:hover ul {
display: none;
}
#nav li ul li {
float: none;
display: block;
}
#nav li ul li a {
width: 118px;
position: absolute;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
Jsfiddle здесь: http://jsfiddle.net/bC7f2/
<ul>
в качестве прямого потомка элемента<ul>
. Насколько мне известно, единственными прямыми потомками элемента<ul>
являются элементы<li>
. Кроме того, в вашем CSS есть следующий селектор#menu li > #nav li ul
, который (1) ничему не соответствует и (2) не имеет связанных с ним стилей. - person War10ck   schedule 14.05.2014