Pure CSS Drop Down Menu

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Silverthan
Δημοσιεύσεις: 114
Εγγραφή: 13 Ιουν 2004 13:43
Τοποθεσία: McLaren Technology Center
Επικοινωνία:

Pure CSS Drop Down Menu

Δημοσίευση από Silverthan » 25 Σεπ 2008 12:18

Καλημέρα,

Θέλω να κάνω ένα drop-down πάνω σε ένα οριζόντιο, αλλά κόλλησα λίγο.

Η HTML είναι

Κώδικας: Επιλογή όλων

<ul id="topnav">
<li>
<a href="#" ><em class="bg"></em>Αρχική</a>

</li>
<li>
<a href="#" ><em class="bg"></em>Φωτογραφίες</a>
</li>
<li>
<a href="#" ><em class="bg"></em>Επικοινωνία</a>
</li>
<li>
<a href="#" class="x"><em class="bg"></em>Νέα</a>
<ul>
<li>
<a href="#">Ειδήσεις</a>
</li>

<li>
<a href="#">Αθλητικά</a>
</li>
<li>
<a href="#">Συνταγές</a>
</li>
</ul>
</li>
</ul>
Και το CSS:

Κώδικας: Επιλογή όλων

#topnav &#123;
background-image&#58;url&#40;images/nav_bg.png&#41;;
background-color&#58;#3b3b3b;
float&#58; right;
margin&#58; 0 ;
padding&#58; 0 0 0 10px;
width&#58; 500px;
height&#58;50px;
font-family&#58;Verdana, Tahoma, Arial, sans-serif;
font-size&#58;14px;
line-height&#58; 50px;
list-style&#58;none; 
&#125;

#topnav li &#123;
float&#58;left;
padding&#58; 0 10px 0 0px;
list-style&#58;none;
&#125;

#topnav  li a &#123;
float&#58;left;
display&#58;block;
height&#58;50px;
line-height&#58;50px;
color&#58;#FFFFFF;
text-decoration&#58;none;
font-family&#58;Verdana, Tahoma, Arial, sans-serif;
list-style&#58;none;
&#125;

#topnav li a&#58;hover &#123;
color&#58; #28E819;
&#125;

#topnav li a em &#123;
display&#58;block;
float&#58;left;
width&#58;30px;
height&#58;50px;
&#125;

#topnav li a em.bg &#123;
background-color&#58; #3b3b3b;
background-image&#58;url&#40;images/nav_bg_small2.png&#41;;
background-repeat&#58; no-repeat;
&#125;

#topnav ul li a&#58;hover li &#123;
float&#58;left;
list-style&#58;none;
&#125;

#topnav ul li a&#58;hover  li a &#123;
list-style&#58; none;
background-color&#58; #3b3b3b;
display&#58;block;
width&#58;auto;
height&#58; 40px;
line-height&#58;40px;
color&#58;#FFFFFF;
&#125;

#topnav ul li a&#58;hover  li a&#58;hover &#123;
color&#58; #28E819;
&#125;
Και ένα σχόλιο γενικότερα για το κώδικα θα ήταν πολύ χρήσιμο (για μένα).

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Pure CSS Drop Down Menu

Δημοσίευση από cherouvim » 25 Σεπ 2008 15:32


Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης