Qaybtii 4/5 Sidee loogu daraa Munu bar iy drop-down menuyada

Assalamo alaykom WB Walaalayaal

Ilaa hada waxaan soo baranay 2 qaybood oo muhiid ah oo kale ah sida blogger loo abuuro iyo sida loogu daro template-ka.

Insha Allah qaybtaa waxaynu ku baran doonaa sida loogu daro munu bar waxa layiraahdo. Menu bar waa meelaha laga tago page khaas ah hadii aad rabtid, ama waxaad rabtaa inaad abuurto  page wax gooni ah ka hadlayo, waxaad isticmaali kartaa menu bar.
Hadii uu waqtiga inoo masaamxo waxaan barandoonaa sida loogu daro drop-down menu oo sii qurxinayo website-kaaga.

Hadii aan biloow casharka:
1. marka hore waxaad u baahantahay inaad qorshayso sida uu u muuqandoono munu barkaaga, waxaay ku xidhantahay waxa aad samaynayso> Tusaale ahaa: ma waxaad rabtaa inaad dhisto web ku saab san IT ama technology, marka waxaad u baahan tahay munu bar (Windows >  Designing > photoshop) waa tusaale oo kaliyah.
2. Waxaad aadaa blogaaga, dhinac midta waxaad click ku sii Layout, kadib waxaad ku dartaa HTML widget cusub. Kadib Code kaan hoos ku qoran ku dar, kadib save dheh. Video-ga daawo hadii aad fahmi waysid steps kaan.

<style type="text/css">#cssmenu{border:1px solid #b9121b;background:#b9121b}#cssmenu > ul{padding:1px 0;margin:0;list-style:none;width:100%;height:21px;border-top:1px solid #FFF;border-bottom:1px solid #FFF;font:normal 8pt verdana,arial,helvetica}#cssmenu > ul li{margin:0;padding:0;display:block;float:left;position:relative;width:160px}#cssmenu > ul li a:link,#cssmenu > ul li a:visited{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#b9121b;color:#fff;width:148px;height:13px}#cssmenu > ul li:hover a,#cssmenu > ul li a:hover,#cssmenu > ul li a:active{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#ec454e;color:#fff;width:146px;height:13px;border-left:1px solid #fff;border-right:1px solid #fff}#cssmenu > ul li ul{margin:0;padding:1px 1px 0;list-style:none;display:none;background:#fff;width:146px;position:absolute;top:21px;left:-1px;border:1px solid #b9121b;border-top:none}#cssmenu > ul li:hover ul{display:block}#cssmenu > ul li ul li{clear:left;width:146px}#cssmenu > ul li ul li a:link,#cssmenu > ul li ul li a:visited{clear:left;background:#b9121b;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li:hover a,#cssmenu > ul li ul li a:active,#cssmenu > ul li ul li a:hover{clear:left;background:#ec454e;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li ul.navigation-3{display:none;margin:0;padding:0;list-style:none;position:absolute;left:145px;top:-2px;padding:1px 1px 0 1px;border:1px solid #b9121b;border-left:1px solid #b9121b;background:#fff;z-index:900}#cssmenu > ul li ul li:hover ul.navigation-3{display:block}#cssmenu > ul li ul li ul.navigation-3 li a:link,#cssmenu > ul li ul li ul.navigation-3 li a:visited{background:#b9121b}#cssmenu > ul li ul li ul.navigation-3 li:hover a,#cssmenu > ul li ul li ul.navigation-3 li a:hover,#cssmenu > ul li ul li ul.navigation-3 li a:active{background:#ec454e}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->






<!-- customize your menus Links -->


<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="http://som-aka.blogspot.com/"><span>Blog Deisgn</span></a>
<ul>
<li><a href="http://som-aka.blogspot.com/"><span>Sidee loo sameeysaa blog</span></a></li>
<li><a href="http://som-aka.blogspot.com/"><span>Qaytii labaad</span></a></li>
<li class="last"><a href="http://som-aka.blogspot.com/"><span>Qaybtaa sadexaad</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="http://som-aka.blogspot.com/"><span>Windows Trainig</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="http://som-aka.blogspot.com/"><span>Windows 10</span></a></li>

<li class="last"><a href="http://som-aka.blogspot.com/"><span>Windows 8</span></a></li>
</ul>
</li>
<li class="last"><a href="http://som-aka.blogspot.com/"><span>Contact</span></a></li>
</ul>
</div>

wixii kale waxaan ku dhamaysaneeynaa video-ga hoos ku yaal. 

Read More >>