עץ התפריט של האתר מורכב מרשימה לא סדורה - התפריט העליון, כאשר לחלק מהכותרות בתפריט העליון יש תפריט משנה שגם הוא רשימה לא סדורה.
נסתכל לשם דוגמא על שתי כותרות מהתפריט העליון גליל ו- CSS

<ul id=tafrit1 > <li> <a href="galil.html">גליל</a> (ילד ראשון) <ul class=submenu > (ילד שני) <li ><a href="galil.html">אודות הגליל</a> <li><a href="migdal.html">מגדל העמק</a> <li><a href="naharia.html">נהריה</a> <li><a href="tveria.html">טבריה</a> </ul> <li ><a href="css.html">CSS</a> </ul> </ul>

שרטוט של עץ התפריט לפי עקרונות ה- DOM יובילו אותנו לתרשים הבא שבו ל - (li) של התפריט העליון ששמו גליל יש שני ילדים :ילד שהוא לינק לדף גליל (a) וילד שהוא רשימה לא סדורה של תפריטי משנה (ul ) ולפריט העליון שרשומה בו המילה CSS ושיש לו רק ילד אחד, לינק לדף (a) .