Нека разгледаме първо html кода:
<!-- При първия елемент няма нищо необичайно -->
<li><a href="#">Home</a></li>
<!-- Забележете, че при втория елемент затварящия таг не се намира след препратката, а едва след списъкът, който сме вмъкнали, т.е. вмъкваме списък в самия елемент и този списък ще го направим да не се вижда, докато не минем с мишката през елемента History-->
<li>
<a href="#">History</a>
<ul>
<li><a href="#">fdsfsad</a></li>
<li><a href="#">fdsfsdf</a></li>
<li><a href="#">fsdfsd</a></li>
</ul>
</li>
</ul>
нека сега "облечем" html кода:
<style>
/*даваме relative за списъците, защото искаме скритото подменю да започне непосредствено до самото меню (в случая от менюто History) */
ul li
{
position:relative;
}
/* задаваме на подменюто да бъде на растояние отляво 149, 0px отгоре (от където започва менюто), слагаме му display:none , за да не се вижда (първоначално) */
li ul
{
position:absolute;
top:0px;
left:170px;
display:none;
}
/* задаваме разстояние 0 и премахваме подчертаването */
ul
{
padding:0px;
margin:0px;
list-style-type:none;
}
/* правим така че невидимите елементи да станат видими едва когато минем с мишката през History */
li:hover ul
{
display:block;
}
/*създаваме блоков елемент, оформяме широчината, отстъпа и слагаме рамка*/
a
{
display:block;
width:150px;
padding:10px;
border:1px solid black;
}
/*правим така, че когато минаваме през препратка да се смени фона и цвета на текста*/
a:hover
{
background:silver;
color:white;
}
</style>
надявам се урокът да ви е харесал. извинявам се, че няма демо.