በብቃት የኤች.ቲ.ኤም.ኤል ኮድ እና በቀላል የሲ.ኤስ.ኤስ ህጎች አማካኝነት ብቅ-ባይ ምናሌን መፍጠር ፣ ማሟያ ማድረግ እና ማሻሻል ይችላሉ ፡፡ የካሳ ማስወጫ ጠረጴዛዎችን እና የምልክት ማድረጊያ የቋንቋ መሣሪያዎችን በመጠቀም ምናሌው ራሱ በሁሉም አሳሾች ውስጥ በትክክል መሥራቱን ማረጋገጥ ይችላሉ ፡፡
መመሪያዎች
ደረጃ 1
በመጀመሪያ የመሠረታዊ ምናሌ አሞሌውን ይያዙ። በጽሑፍ አርታዒ ውስጥ ንዑስ ምናሌ ጋር ልዩ የቁጥር ዝርዝርን ይፍጠሩ። አብዛኛውን ጊዜ “ኖትፓድ” ለእነዚህ ዓላማዎች ጥቅም ላይ ይውላል ፡፡ ንዑስ ምናሌ እንደ ወላጅ ዝርዝር አካል ሆኖ ይሠራል። ለምሳሌ-የመጀመሪያ አካል የጎርፍ ንጥረ ነገር የጎርፍ ንጥረ ነገር 2 መስክ ንጥረ ነገር 3 የመስክ ንጥረ ነገር 4 መስክ ንጥረ ነገር 5
ደረጃ 2
ይህንን ዝርዝር በተለየ የ html ፋይል ውስጥ ያስቀምጡ። ከዚያ.css ፋይል ይፍጠሩ። ሁሉንም አስፈላጊ የቅጥ ሉህ መለኪያዎች ያስገቡ። ይህንን በጣም በጥንቃቄ ያድርጉት ፣ ምክንያቱም አንድ ስህተት ፣ እና ብቅ-ባይ ምናሌው በትክክል አይታይም ወይም በጭራሽ አይሰራም።
ደረጃ 3
በጥይት ዝርዝር ውስጥ የተተገበሩ ማናቸውንም ጥይቶች እና ንጣፎችን ያስወግዱ ፡፡ የሲ.ኤስ.ኤስ. መሣሪያዎችን በመጠቀም የማውጫውን ስፋት ያዘጋጁ-ul -style: የለም ፤ ስፋት 200px; }
ደረጃ 4
በዝርዝሩ ውስጥ የሁሉም ንጥሎች አንጻራዊ አቀማመጥ በሚባል ባህሪ ምልክት ያድርጉባቸው: ul li: አንፃራዊ; }
ደረጃ 5
ከዚያ ንዑስ ምናሌውን ያስተካክሉ ፣ የመዳፊት ጠቋሚው በእቃው ላይ በሚሆንበት ጊዜ የእነሱን አባሎች ከወላጅ ምናሌው ወደ ቀኝ ይታያሉ-li ul: absolute; left: 199px; top: 0; display: none; }
ደረጃ 6
የግራ ባህሪው ከራሱ ምናሌው ስፋት አንድ ፒክሰል ያነሰ ነው። ይህ ባለ ሁለት ድንበሮች ሳይፈጠሩ ብቅ ባይ ዕቃዎች በትክክል እንዲቀመጡ ያስችላቸዋል ፡፡ የማሳያ ባህሪው ገጹን ሲከፍት ንዑስ ምናሌውን ለመደበቅ ያገለግላል ፡፡
ደረጃ 7
ተገቢውን የሲኤስኤስ አማራጮችን በመጠቀም አገናኞቹን እንደአስፈላጊነቱ ያስተካክሉ ፡፡ ማሳያውን አካት: አገናኞች ለእነሱ የተጠበቀውን ቦታ ሁሉ እንዲይዙ አግድ ልኬት። የመዳፊት ጠቋሚው በላዩ ላይ ሲያንዣብብ ምናሌው እንዲታይ ለማድረግ የሚከተሉትን ኮድ ያስገቡ li: hover ul: block; }
ደረጃ 8
የዝርዝር ንጥሎችን እና አገናኞችን እንደፈለጉ ለማሳየት ተጨማሪ አማራጮችን ያዘጋጁ ፡፡ በ.html ፋይል ውስጥ አንድ አይነታ ያካትቱ። ብቅ-ባይ ምናሌው ለመጠቀም ዝግጁ ነው።
