Här hittar du nedanstående exempel

Vi börjar med HTML delen.

HTML

<ul id="dropdown">
  <li><a href="#">Länk 1</a>
    <ul>
      <li><a href="#">Länk 1 - 1</a></li>
      <li><a href="#">Länk 1 - 2</a></li>
      <li><a href="#">Länk 1 - 3</a></li>
   </ul>
 </li>
 <li><a href="#">Länk 2</a>
    <ul>
      <li><a href="#">Länk 2 - 1</a></li>
      <li><a href="#">Länk 2 - 2</a></li>
      <li><a href="#">Länk 2 - 3</a></li>
    </ul>
  </li>
  <li><a href="#">Länk 3</a></li>
  <li><a href="#">Länk 4</a></li>
</ul>

Här sätter vi upp strukturen för vår drop down menu.  Menyn består av ett oordnad lista , <ul>, med fyra listelement <li>. I dessa finns först en länk, <a>, och sedan en ny oordnad lista <ul> med egna listelement <li>. De två första länkarna ”Länk 1″ och ”Länk 2″ har varsin drop down menu medan ”Länk 3″ och ”Länk 4″ inte har det.

CSS

#dropdown {
 float: left;
 margin: 0;
 padding: 0;
}
#dropdown li {
 background: #F7F0E0;
 border:1px solid #666;
 float: left;
 list-style: none;
 margin: 0;
 padding:0 0 0 10px;
 position: relative;
 height:20px;
 width:100px;
}
#dropdown li:hover {
 background: #FF2828;
}
#dropdown li a {
 text-decoration:none;
}
#dropdown ul {
 background: #F7F0E0;
 display: none;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 20px;
 left: -1px;
 z-index: 500;
}
#dropdown ul {
 position: absolute;
}
#dropdown li:hover ul {
 display: block;
}

Hela drop down menyn styrs enbart av CSS. I en senare guide kommer vi att lägga på javascripteffekter med hjälp av jQuery men här nöjer vi oss med CSS.

Drop down menyerna döljs genom att vi till och börja med anger regeln ”display:none”. När sedan muspekaren befinner sig över listelementet som drop down menyerna finns i så visar vi dem med CSS-regeln ”display:block”. Detta sker att använda pseudo-väljaren ”:hover” .

Här kan du lära dig mer om hur du skriver CSS regler!

Gör så här:

Börja med att skriva lite text mellan två HTML blockquote taggar.

HTML

<blockquote>Lorem ipsum dolor sit amet
 consectetur adipiscing elit.</blockquote>

Lägg sedan till dessa CSS regler till din stilmall.

CSS

blockquote {
   float:right;
   font-size:130%;
   font-style:italic;
   margin:10px 15px;
   width: 30%;
}

I exemplet ovan anges att citatet ska flyta till höger och uppta 30%  av spaltens fulla bredd.Texten kommer att visas med 16 pixlars storlek och vara kursiv. Texten kommer också att ha en margin, dvs. en tomt område på alla fyra sidor på 10 pixlar.

Läs mer om hur CSS skrivs i vår CSS skola.

CSS

img.transparent {
   filter:alpha(opacity=40);
   -moz-opacity:0.4;
   -khtml-opacity: 0.4;
   opacity: 0.4;
}

I ovanstående exempel är bilden 40% genomskinlig.

Observera att sidan måste ha en korrekt Doctype för att genomskinlighet ska fungera i Internet Explorer.

Klicka här för att se följande exempel

HTML:

<div class="round"><div><div><div>
<p>Innehållet skrivs här...</p>
</div></div></div></div>

CSS:

.round {
   background:url(images/corners1/lt.gif) 0 0 no-repeat;
   background-color:#003399;
}
.round div {
   background:url(images/corners1/rt.gif) 100% 0 no-repeat;
}
.round div div {
   background:url(images/corners1/rb.gif) 100% 100% no-repeat;
}
.round div div div {
   background:url(images/corners1/lb.gif) 0 100% no-repeat;
   padding: 30px;
}

Bilder:

lt.gif	rt.gif	rb.gif	lb.gif

Boxen består av fyra divisioner inuti varandra med en bild i vardera hörn.

• Den yttersta (första) div-taggen bestämmer boxens bredd, anger boxens bakgrundsfärg och visar bilden för det övre vänstra hörnet.
• Den näst yttersta visar bilden med det övre högra hörnet.
• Nästföljande div placerar bilden i det nedre högra hörnet.
• Den sista div-taggen visar bilden i nedre vänstra hörnet och anger boxens padding.

För att undvika problem är det viktigt att boxens bredd och eventuell höjd enbart anges i den första div-taggen och att eventuell padding anges i den sista.