css/html menu

[foutzos]

Καλησπέρα σε όλους. Θέλω την βοήθεια σας όχι για να φτιάξω menu, για να διορθώσω κάτι πάνω σ αυτό ενώ δεν γνωρίζω πως γίνεται.

 

 

το Menu σε HTML είναι

<div id='topwrapper'>
<div id='topnav'>
<ul id='top'>
<li><a href='/'>Κεντρική</a></li>
<li><a class='trigger' href='#'>TEXT WITH DROPDOWN</a>
<ul>
<li><a href='#'>DROPDOWN1</a>
<ul>
  <li><a href='#'>LIST1OF DROPDOWN1</a></li>
  <li><a href='#'>LIST2OF DROPDOWN1</a></li>
  <li><a href='#'>LIST3OF DROPDOWN1</a></li>
</ul>
</li>
<li><a href='#'>DROPDOWN2</a></li>
</ul>
</li>
<li><a href='#'>NO DROP</a></li>
<li><a href='#'>NO DROP</a></li>
<li><a href='#'>NO DROP</a></li>
</ul>
<br class='clearit'/>
</div>
    <div style='clear:both;'></div></div> 

To CSS του Menu είναι αυτό 

#topwrapper{background:url(εικόνα.png) repeat-x top;width:100%;margin:0 auto;padding:0 auto;}
#topnav{width:960px;height:25px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:open sans;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 15px open sans;text-transform:none;color:#e3e4e4;border-right:1px solid #f6672e;border-left:1px solid #852601;padding:4px 12px 6px}
#top li:first-child a { border-left: none; }
#top li:last-child a {border-right: none; }
#top a.trigger{background-image:url(http://2.bp.blogspot.com/-RrMNxJ-LHEM/T0EGCniEi9I/AAAAAAAAFXI/PgTFPfKHsqM/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:4px 24px 6px 12px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#000;font-size:12px;font-weight:400;text-transform:none;font-family:open sans;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6);filter:alpha(opacity=87);-moz-opacity:.87;opacity:.87}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#fff;color:#000;text-decoration:underline}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#aaa;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#111!important;color:#e3e4e4!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px open sans;color:#772201;display:block;line-height:16px;text-transform:uppercase}
#top li:hover a span,#top li:hover a.arrow span{color:#eaeaea} 

Αυτό που θέλω να κάνω είναι να έχω κανονικά το Menu και σε μια υποκατηγορία να βγαίνει και άλλο Menu δεξιά (Menu μέσα στο Menu δηλαδή.) Δεν ξέρω αν έγινα αντιληπτός. Το πρόβλημα είναι ότι με τον παραπάνω κώδικα εκτός από το ότι δεν βγαίνουν τα List σε δευτερο menu το Dropdown 2 δεν εμφανίζεται καν.

Ευχαριστώ εκ των προτέρων για το χρόνο σας.

[exarhis]

Δε προλαβαίνω να διαβάσω όλο το κώδικα μιας και είμαι βιαστικός.

Στα html tags μη χρησιμοποιείς ' αλλά " για να σου βγαίνει σωστός ο κώδικας πχ style="display:none" και όχι style='display:none'

[geomagas]

Στα html tags μη χρησιμοποιείς ' αλλά " για να σου βγαίνει σωστός ο κώδικας πχ style="display:none" και όχι style='display:none'

 

Ποιος τα λέει αυτά;

[alou]

Κανείς

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2

 

Αν πρότεινα κάτι σαν συνήθεια και καλή πρακτική θα ήταν τα id selectors να τα αφήσεις για js χρήση και να παίξεις μόνο με classes και nested classes στο CSS.

 

Για την ερώτησή σου, δες αυτό:

http://jsfiddle.net/mUwk7/

 

1. μόνο τα ul absolute positioned, όχι τα li γιατί θα χαθούν

2. κρύβεις το 3ο ul στο hover του 1ου li και το εμφανίζεις μόνο στο hover του δικού του parent li

[exarhis]

ααα εγώ έτσι έχω μάθει 

[geomagas]

Το να διαδίδουμε ανακρίβειες χωρίς να κάνουμε τον κόπο να διασταυρώνουμε τις πηγές μας δεν μου φαίνεται και τόσο επαγγελματικό. Είναι σαν να περπατάμε και να αφήνουμε πίσω μας μπανανόφλουδες για να τις πατήσουν άλλοι.

[Xvipes]

Μιας και απαντήθηκε η αρχική ερώτηση,

 

Site: HTML Quotation Marks
When quoting attributes values, use double quotation marks.
Use double ("") rather than single quotation marks ('') around attribute values. 

<!-- Not recommended -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- Recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>

Έχει διάφορα guides made by google για όποιον τα θέλει κάπου μαζεμένα.

[foutzos]

Καλημέρα παιδιά και ευχαριστώ για τις απαντήσεις σας!!!

 

@Aloy ευχαριστώ πολύ ακριβώς αυτό που ήθελα. Μπορούμε μόνο να βγάζουμε στο 2ο menu το ένα κάτω από το άλλο και όχι σαν συννεφάκι; δοκίμασα να αλλάξω το display:block σε Inline αλλά μου χαλάει πάλι.

 

@Xvipes  ποια η διαφορά;

[alou]

Καλημέρα παιδιά και ευχαριστώ για τις απαντήσεις σας!!!

 

@Aloy ευχαριστώ πολύ ακριβώς αυτό που ήθελα. Μπορούμε μόνο να βγάζουμε στο 2ο menu το ένα κάτω από το άλλο και όχι σαν συννεφάκι; δοκίμασα να αλλάξω το display:block σε Inline αλλά μου χαλάει πάλι.

 

 

  Το ένα κάτω από το άλλο είναι στο παράδειγμά μου, δεν είμαι σίγουρος όμως τι ακριβώς εννοείς οπότε αν θες γίνεσαι πιο συγκεκριμένος.

 

 

Μιας και απαντήθηκε η αρχική ερώτηση,

 

Site: HTML Quotation Marks

When quoting attributes values, use double quotation marks.

Use double ("") rather than single quotation marks ('') around attribute values. 

<!-- Not recommended -->

<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- Recommended -->

<a class="maia-button maia-button-secondary">Sign in</a>

Έχει διάφορα guides made by google για όποιον τα θέλει κάπου μαζεμένα.

 

Υπαρχει διαφορα στο να ειναι κατι suggested by google η οποιονδηποτε αλλο και το να αποτελει επισημη προδιαγραφη η να μπορει να ειπωθει οτι ειναι λαθος.

 

Εγω μπορει να θελω να κανω τα παντα single quoted στην html γιατι πχ εχω ενα feed parser εστωτερικης χρησης που το χρησιμοποιει ετσι και με double quotes βγαζει σφαλματα ή πολύ απλά γιατί τα double quotes είναι χαρακτήρας που χρειάζεται στο  attribute. Δεν ειναι καθολου λαθος και δεν θα εχει προβλημα σε κανενα standards compliant browser.

 

Και μια και η κουβέντα γύρω από τα quotes, σε html5 doctype κάποιος μπορεί να μη χρησιμοποιεί καν quotes αν στο attribute name δεν υπάρχουν κάποιοι χαρακτήρες (',",=,>,< κλπ)

[geomagas]

Άλλο suggestions, άλλο specs. Και φυσικά άλλο google κι άλλο w3c.

 

Μην τα ισοπεδώνουμε όλα! "Το λέει η google" και κάτι τρέχει στα γύφτικα...

 

Να σοβαρευτούμε!

[Xvipes]

Δεν είπα κάπου ότι είναι λάθος, απλά best practise.

Geomagas δε ξέρω γιατί σε χαλάνε τα suggestions της google αλλά νομίζω αυτά θα έπρεπε να ακολουθείς και όχι του w3c.

Το λέω με κάθε σοβαρότητα. 

[foutzos]

δεν μπορώ να καταλάβω που χάνομαι....

 

όντως στο παράδειγμα σου δουλεύει σωστά. στο Blog δεν δουλέυει. μήπως χάνω κάποιο κομμάτι;

 

όταν ανοίγουν τα menu δεν βρίσκονται τα στοιχεία το ένα κάτω από το άλλο.  αντιθέτως βρίσκονται το ένα δίπλα στο άλλο.

Site: http://postimg.org/gallery/bfdvq6nm/1c7ae633/

[geomagas]

Δεν είπα κάπου ότι είναι λάθος, απλά best practise.

Γιατί είναι best practice; Πως αποδεικνύεται/δικαιολογείται αυτό;

 

Geomagas δε ξέρω γιατί σε χαλάνε τα suggestions της google αλλά νομίζω αυτά θα έπρεπε να ακολουθείς και όχι του w3c.

Δεν είπα ότι με χαλάνε τα suggestions. Λάθος κατάλαβες.

Και συγκρίνεις ανόμοια πράγματα. Η google κάνει suggestions ενώ το w3c βγάζει specs. Μην τα μπερδεύεις.

Μου λες λοιπόν να ακολουθώ suggestions over specs; Αυτό λες;

 

Με όση σοβαρότητα μπορώ να επιστρατεύσω.

[foutzos]

βασικά αν μικρύνω το κείμενο συμβαίνει αυτό http://jsfiddle.net/mUwk7/2/.

Το βρήκα είναι θέμα Width!

Ευχαριστώ και πάλι παιδιά!

[alou]

@foutzos: #top li li {float:none}