Βοηθεια με drop menu - CSS

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

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

Απάντηση
Zodiark
Δημοσιεύσεις: 6
Εγγραφή: 13 Αύγ 2010 23:43

Βοηθεια με drop menu - CSS

Δημοσίευση από Zodiark » 16 Αύγ 2010 18:16

Γειας σας παιδια.Θελω βοηθεια:
Εχω ενα drop menu και θελω να κανω το εξης.Οταν βγαζει τις επιλογες του μενυ, πισω, σε καθε σειρα, να μπενει μια εικονα σε repeat, μικρη οπως την βαζουν και βγενει μεγαλη και μακροστενη.Και οταν παει το ποντικι πανω σε μια επιλογη, να φαινεται αλλα απο πισω.
Π.χ οπως εδω:http://www.cssmenumaker.com/builder/men ... p?menu=065
ειναι πισω ασπρο και οταν παει πανω το ποντικι βγενει γκρι χρωμα πισω.Ο κοδικας του css ειναι

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

bg {background: url(images/bg-bubplastic-h-orange.gif);}
.menu {padding:0 0 0 0px; margin:0; list-style:none; height:27px; background:  no-repeat; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:20px; line-height:15px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:20px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; 
 background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:80; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:20px; right:2px; background:#fff; background-repeat: repeat padding; :3px 0; border:1px solid #95d2ee; white-space:nowrap; width:300px; height:189px;}
.menu :hover ul.sub li {display:block; height:20px;  position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; {repeatfont-size:13px; height:27px; width:292px; line-height:27px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 0px;}
.menu :hover ul.sub li a.fly {background:#fff 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background: url({T_THEME_PATH}/images/gray.gif); color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#95d2ee 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#95d2ee 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}

Απάντηση

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

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

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