Я хочу, чтобы вы знали, прежде чем я начну, что я просматривал все вопросы о подменю и не видел ничего, что могло бы помочь коду, который я уже изложил. Я ценю любую помощь, которую кто-либо может мне дать.
Итак, я пытаюсь добавить подменю, и я думал, что понял это, но я не думаю, что совсем понимаю, как заставить дочерние комбинаторы работать. Если бы вы могли взглянуть конкретно на эту часть кода, вы были бы в моем «списке святых».
ETA: О да, и проблема в том, что подменю не выходит вправо и не отображается рядом с родителем, от которого он должен быть подчиненным, что я и хочу, чтобы он делал. Я надеюсь, что в этом есть смысл.
Вот предварительный просмотр скрипки - http://jsfiddle.net/BVtSC/18/
А вот и CSS:
/*------------------------- Header ---------------------------*/
#header {
background: #333 url(../images/bg-header2.png) repeat-x;
height:184px;
margin:15px 0 0;
}
#header div {
margin:0 auto;
padding:28px 0 0;
position:relative;
width:500px;
}
#header div ul {
height:118px;
left:10px;
list-style:none;
margin:0;
overflow:visible;
padding:0;
position:absolute;
top:10px;
float: left;
width: 500px;
}
#header div ul li:first-child {
margin:0;
}
#header div ul li {
float:left;
height:66px;
margin:0 0 0 65px;
text-align:left;
position:relative;
}
#header div ul li a {
color:#fff;
font-family:oswaldregular;
font-size:16px;
line-height:24px;
text-decoration:none;
text-transform:uppercase;
}
#header div ul li.selected a, #header div ul li a:hover {
color:#DD2D00;
}
#header div ul li ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
#header div ul li:hover ul {
left:0;
top:37px;
}
#header div ul li ul li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#header div ul li ul li:hover {
background:none #DD2D00;
}
#header div ul li ul li:hover {
left:0;
top:0;
}
#header div ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:28px;
text-transform:none;
}
#header div ul li ul li.selected a, #header div ul li ul li a:hover {
color:#fff!important;
}
#header div ul li ul li ul {
height:1000px;
right:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: right;
}
#header div ul li ul li:hover ul {
left:0;
top:37px;
}
#header div ul li ul li ul li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#header div ul li ul li ul li:hover {
background:none #DD2D00;
}
#header div ul li ul li ul li:hover {
left:0;
top:0;
}
#header div ul li ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:28px;
text-transform:none;
}
#header div ul li ul li ul li.selected a, #header div ul li ul li ul li a:hover {
color:#fff!important;
}
Вот HTML:
<div id="header">
<div>
<ul>
<li> <a href="index.html">Home</a>
</li>
<li> <a href="about.html">About</a>
</li>
<li class="selected"> <a href="portfolio.html">Portfolio</a>
<ul>
<li> <a href="fantasy.html">Fantasy</a>
</li>
<li> <a href="makeup.html">Makeup</a>
<ul>
<li><a href="glamour.html">Glamour Makeup</a>
</li>
<li><a href="sfxmakeup.html">Special Effects Makeup</a>
</li>
</ul>
</li>
<li> <a href="boudoir.html">Boudoir</a>
</li>
<li> <a href="babykids.html">Baby & Kids</a>
<ul>
<li><a href="baby.html">Baby</li>
<li><a href="baby.html">Kids</li> </ul>
</li>
<li>
<a href="family.html">Family</a>
<ul>
<li><a href="couples.html">Couples</li>
<li><a href="mombaby.html">Mother/Baby</li>
<li><a href="momchild.html">Mother/Child</li>
<li><a href="fatherchild.html">Father/Child</li>
</ul>
</li>
<li>
<a href="pets.html">Pets</a>
</li>
<li> <a href="portrait.html">Portrait</a>
</li>
</ul>
</li>
<li> <a href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
Опять же, любая помощь вообще будет творить чудеса. Спасибо за внимание. :)
