Drop Down menu not working Pls help for Blogspot

HTML & CSS
1

here is my code i made for drop down menu


<html>
<style>
    
	#menu ul
	{
	   list-style:none;
	}
	
	#menu ul li
	{
	 background-image : url(https://photos-6.dropbox.com/t/2/AAAGY5SSNVBX-2KLDwUnKWYPzW3MFeNP8tIYx6DUSn8YDg/12/881859056/png/32x32/1/_/1/2/g.PNG/EKDb778JGAkgBygH/pJCA6bJLFUSQN8glGodKu6h_phkZsxqoHwHnoXKLGo4?preserve_transparency=1&size=1280x960&size_mode=3);  
     margin:3px;	 
	 width:120px;
	 height:35px;
	 line-height:35px;
	 text-align:center;
	 float:left;
	 position:relative;
	 border-radius:8px;
	 position:relative;
	}
	
	#menu ul li a
	{
	text-decoration:none;
    color:white; 
    display:block; 	
	}
	
	#menu ul li a:hover
	{
	background-color:red;
	border-radius:8px;
	}
	
	*{
	   margin:0px;
	   padding:0px;
	}
	
	#menu ul ul
	{
	  position:absolute;
	  display:none;
	}
	
	#menu ul li:hover > ul
    {
	  display:block;
    }	
 	
	#menu ul ul ul
	{
	  margin-left:120px;
	  top:0px;
	}
	
</style>

<body>
        <div id='menu'>      
 	        <ul>
			     <li><a href="#"> HOME </a></li>
				 <li><a href="#"> HOW TO </a></li>
				 <li><a href="#"> TRICKS </a></li>
				 <li><a href="#"> EDUCATION <span><img src="https://photos-4.dropbox.com/t/2/AAAiQJtYRuAqTSmreMVsy4r7BssgtESITo9JpPjOeeJPLw/12/881859056/png/32x32/1/_/1/2/down%20arrow.png/EKDb778JGAcgBygH/OmaHs6TrFFW9MLRrqBeZnVhCmXOaoJwrgFpt4YhEiTM?preserve_transparency=1&size=1280x960&size_mode=3" height="15px" width="20px"/></span></a>
				    <ul>
				        <li><a href="#">LEARN FREE</a></li>
						<li><a href="#">LANGUAGES <span><img src="https://photos-5.dropbox.com/t/2/AAAPQ9YPXi9w-WUpyFvvZESnn2F9NcvrTbi_4ZFtk_jnrg/12/881859056/png/32x32/1/_/1/2/right%20arrow.png/EKDb778JGAcgBygH/t7oQFPS0NWE0eDoqpOOG9ZT1XilNgQf1YSfpkTjlSAI?preserve_transparency=1&size=1280x960&size_mode=3" height="15px" width="15px"/></span></a>
						    <ul>
					           <li><a href="#">HTML</a></li>
							   <li><a href="#">C++</a></li>
                               <li><a href="#">C#</a></li>  							   
							</ul>
						</li>
				        <li><a href="#">PROJECTS</a></li>
                    </ul>						
				 </li>
				 <li><a href="#"> SOFTWARE </a></li>
				 <li><a href="#"> CONTACT </a></li>
			</ul>	 
	    </div> 
	 </div>	
	<br>
</body>
</html>

i want to add to my website but not working the sub menus are hidden

1364×485 268 KB

here is the blogspot edit HTML code


<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Watermark
Designer: Blogger
URL:      www.blogger.com
----------------------------------------------- */

/* Variable definitions
   ====================

   <Variable name="keycolor" description="Main Color" type="color" default="#c0a154" value="#000000"/>

   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#333333"/>
   </Group>

   <Group description="Backgrounds" selector=".main-inner">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#c0a154" value="#77ccee"/>
     <Variable name="footer.background.color" description="Footer Background" type="color" default="transparent" value="#331100"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#cc3300" value="#cc3300"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#993322" value="#993322"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#ff3300" value="#ff3300"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal normal 60px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 60px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="#ffffff"  value="#ffffff"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#997755"  value="#5588aa"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 20px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(link.color)" value="#cc3300"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="tabs.separator.color" description="Separator Color" type="color" default="$(body.background.color)" value="#77ccee"/>
   </Group>

   <Group description="Date Header" selector="h2.date-header">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="#997755" value="#336600"/>
   </Group>

   <Group description="Post" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Title Font" type="font"
         default="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 30px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="post.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="post.border.color" description="Border Color" type="color" default="#ccbb99"  value="transparent"/>
   </Group>

   <Group description="Post Footer" selector=".post-footer">
     <Variable name="post.footer.text.color" description="Text Color" type="color" default="#997755" value="#997755"/>
   </Group>

   <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 20px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#336600"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#777777" value="#777777"/>
   </Group>

   <Group description="Footer" selector=".footer-inner">
     <Variable name="footer.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
     <Variable name="footer.widget.title.text.color" description="Gadget Title Color" type="color" default="$(widget.title.text.color)" value="#ffffff"/>
   </Group>

   <Group description="Footer Links" selector=".footer-inner">
     <Variable name="footer.link.color" description="Link Color" type="color" default="$(link.color)" value="#ffdd99"/>
     <Variable name="footer.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#eecc77"/>
     <Variable name="footer.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#ffffcc"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_birds.png) repeat scroll top left" value="$(color) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_flower.png) repeat scroll top left"/>
   <Variable name="body.background.overlay" description="Overlay Background" type="background" color="$(body.background.color)"
       default="transparent url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_overlay_birds.png) no-repeat scroll top right" value="transparent none no-repeat scroll top left"/>
   <Variable name="body.background.overlay.height" description="Overlay Background Height" type="length" default="121px" min="0" max="1000px" value="0"/>

   <Variable name="tabs.background.inner" description="Tabs Background Inner" type="url" default="none" value="none"/>
   <Variable name="tabs.background.outer" description="Tabs Background Outer" type="url" default="none" value="none"/>
   <Variable name="tabs.border.size" description="Tabs Border Size" type="length" default="0" min="0" max="10px" value="0"/>
   <Variable name="tabs.shadow.spread" description="Tabs Shadow Spread" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" min="0" max="100px" value="0"/>
   <Variable name="main.cap.height" description="Main Cap Height" type="length" default="0" min="0" max="100px" value="100px"/>
   <Variable name="main.cap.image" description="Main Cap Image" type="url" default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/watermark/main_cap_flower.png)"/>
   <Variable name="main.cap.overlay" description="Main Cap Overlay" type="url" default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/watermark/main_overlay_flower.png)"/>
   <Variable name="main.background" description="Main Background" type="background"
       default="transparent none no-repeat scroll top left" value="#66bb33 url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_flower.png) repeat scroll top center"/>

   <Variable name="post.background.url" description="Post Background URL" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/watermark/post_background_birds.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/watermark/post_background_birds.png)"/>
   <Variable name="post.border.size" description="Post Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="post.border.style" description="Post Border Style" type="string" default="dotted" value="dotted"/>
   <Variable name="post.shadow.spread" description="Post Shadow Spread" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="footer.background" description="Footer Background" type="background"
       color="$(footer.background.color)" default="$(color) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_navigator.png) repeat scroll top left" value="$(color) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_navigator.png) repeat scroll top left"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
*/

/* Use this with templates/1ktemplate-*.html */

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

html body .content-outer {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.content-outer {
  font-size: 92%;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.body-fauxcolumns .cap-top {
  margin-top: 30px;
  background: $(body.background.overlay);
  height: $(body.background.overlay.height);
}

.content-inner {
  padding: 0;
}

/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 20px;
  padding-right: 20px;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 2px 2px rgba(0, 0, 0, .1);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: 140%;
  color: $(description.text.color);
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section {
  margin: 0 20px;
}

.tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels {
  margin-left: -11px;
  margin-right: -11px;

  background-color: $(tabs.background.color);
  border-top: $(tabs.border.size) solid #ffffff;
  border-bottom: $(tabs.border.size) solid #ffffff;

  -moz-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
  -goog-ms-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
  box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
}

.tabs-inner .PageList .widget-content,
.tabs-inner .LinkList .widget-content,
.tabs-inner .Labels .widget-content {
  margin: -3px -11px;

  background: transparent $(tabs.background.outer)  no-repeat scroll right;
}

.tabs-inner .widget ul {
  padding: 2px 25px;
  max-height: 34px;

  background: transparent $(tabs.background.inner) no-repeat scroll left;
}

.tabs-inner .widget li {
  border: none;
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .25em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);

  margin: 0 0 .5em;
}

h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

/* Main
----------------------------------------------- */
.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}

.main-outer {
  margin-top: $(main.cap.height);
  background: $(main.background);
}

.main-inner {
  padding-top: $(main.padding.top);
}

.main-cap-top {
  position: relative;
}

.main-cap-top .cap-right {
  position: absolute;

  height: $(main.cap.height);
  width: 100%;

  bottom: 0;

  background: transparent $(main.cap.image) repeat-x scroll bottom center;
}

.main-cap-top .cap-left {
  position: absolute;

  height: 245px;
  width: 280px;
  right: 0;
  bottom: 0;

  background: transparent $(main.cap.overlay) no-repeat scroll bottom left;
}

/* Posts
----------------------------------------------- */
.post-outer {
  padding: 15px 20px;
  margin: 0 0 25px;

  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;

  border: $(post.border.style) $(post.border.size) $(post.border.color);

  -moz-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
  -goog-ms-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
  box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
}

h3.post-title {
  font: $(post.title.font);
  margin: 0;
}

.comments h4 {
  font: $(post.title.font);
  margin: 1em 0 0;
}

.post-body {
  font-size: 105%;
  line-height: 1.5;
  position: relative;
}

.post-header {
  margin: 0 0 1em;

  color: $(post.footer.text.color);
}

.post-footer {
  margin: 10px 0 0;
  padding: 10px 0 0;

  color: $(post.footer.text.color);
  border-top: dashed 1px $(widget.alternate.text.color);
}

#blog-pager {
  font-size: 140%
}

#comments .comment-author {
  padding-top: 1.5em;

  border-top: dashed 1px $(widget.alternate.text.color);

  background-position: 0 1.5em;
}

#comments .comment-author:first-child {
  padding-top: 0;

  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.alternate.text.color);
  border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .continue {
  border-top: 2px solid $(widget.alternate.text.color);
}

/* Widgets
----------------------------------------------- */
.widget ul, .widget #ArchiveList ul.flat {
  padding: 0;
  list-style: none;
}

.widget ul li, .widget #ArchiveList ul.flat li {
  padding: .35em 0;
  text-indent: 0;
  border-top: dashed 1px $(widget.alternate.text.color);
}

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
  border-top: none;
}

.widget .post-body ul {
  list-style: disc;
}

.widget .post-body ul li {
  border: none;
}

.widget .zippy {
  color: $(widget.alternate.text.color);
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 5px;

  background: #fff;

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

.post-body img, .post-body .tr-caption-container {
  padding: 8px;
}

.post-body .tr-caption-container {
  color: #333333;
}

.post-body .tr-caption-container img {
  padding: 0;

  background: transparent;
  border: none;

  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

/* Footer
----------------------------------------------- */
.footer-outer {
  color:$(footer.text.color);
  background: $(footer.background);
}

.footer-outer a {
  color: $(footer.link.color);
}

.footer-outer a:visited {
  color: $(footer.link.visited.color);
}

.footer-outer a:hover {
  color: $(footer.link.hover.color);
}

.footer-outer .widget h2 {
  color: $(footer.widget.title.text.color);
}

/* Mobile
----------------------------------------------- */
body.mobile  {
  background-size: 100% auto;
}

.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}

html .mobile .mobile-date-outer {
  border-bottom: none;
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
  margin-bottom: 10px;
}

.mobile .main-inner .date-outer {
  padding: 0;
}

.mobile .main-inner .date-header {
  margin: 10px;
}

.mobile .main-cap-top {
  z-index: -1;
}

.mobile .content-outer {
  font-size: 100%;
}

.mobile .post-outer {
  padding: 10px;
}

.mobile .main-cap-top .cap-left {
  background: transparent none no-repeat scroll bottom left;
}

.mobile .body-fauxcolumns .cap-top {
  margin: 0;
}

.mobile-link-button {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
}

.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(link.color);
}

.mobile-index-date .date-header {
  color: $(date.text.color);
}

.mobile-index-contents {
  color: $(body.text.color);
}

.mobile .tabs-inner .section {
  margin: 0;
}

.mobile .tabs-inner .PageList {
  margin-left: 0;
  margin-right: 0;
}

.mobile .tabs-inner .PageList .widget-content {
  margin: 0;
  color: $(tabs.selected.text.color);
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.separator.color);
}
.header
{
  text-align:center
};

]]></b:skin>
2

The menu on its own is more or less working. Do you have a link to the actual page where this is implemented?

3

i sent u a mail paulOB pls check my website name were i implemented

4

Haven’t received anything?

5

1364×485 268 KB

the blue color which is coming drop down
there is a problem when i place my mouse over it it does not display any submenus

this is the html code i have written to add it in the Widget of my blogger website

<html>
<style>
    
	#menu ul
	{
	   list-style:none;
	}
	
	#menu ul li
	{
	 background-image : url(https://photos-6.dropbox.com/t/2/AAAGY5SSNVBX-2KLDwUnKWYPzW3MFeNP8tIYx6DUSn8YDg/12/881859056/png/32x32/1/_/1/2/g.PNG/EKDb778JGAkgBygH/pJCA6bJLFUSQN8glGodKu6h_phkZsxqoHwHnoXKLGo4?preserve_transparency=1&size=1280x960&size_mode=3);  
     margin:3px;	 
	 width:120px;
	 height:35px;
	 line-height:35px;
	 text-align:center;
	 float:left;
	 position:relative;
	 border-radius:8px;
	 position:relative;
	}
	
	#menu ul li a
	{
	text-decoration:none;
    color:white; 
    display:block; 	
	}
	
	#menu ul li a:hover
	{
	background-color:red;
	border-radius:8px;
	}
	
	*{
	   margin:0px;
	   padding:0px;
	}
	
	#menu ul ul
	{
	  position:absolute;
	  display:none;
	}
	
	#menu ul li:hover > ul
    {
	  display:block;
    }	
 	
	#menu ul ul ul
	{
	  margin-left:120px;
	  top:0px;
	}
	
</style>

<body>
        <div id='menu'>      
 	        <ul>
			     <li><a href="#"> HOME </a></li>
				 <li><a href="#"> HOW TO </a></li>
				 <li><a href="#"> TRICKS </a></li>
				 <li><a href="#"> EDUCATION <span><img src="https://photos-4.dropbox.com/t/2/AAAiQJtYRuAqTSmreMVsy4r7BssgtESITo9JpPjOeeJPLw/12/881859056/png/32x32/1/_/1/2/down%20arrow.png/EKDb778JGAcgBygH/OmaHs6TrFFW9MLRrqBeZnVhCmXOaoJwrgFpt4YhEiTM?preserve_transparency=1&size=1280x960&size_mode=3" height="15px" width="20px"/></span></a>
				    <ul>
				        <li><a href="#">LEARN FREE</a></li>
						<li><a href="#">LANGUAGES <span><img src="https://photos-5.dropbox.com/t/2/AAAPQ9YPXi9w-WUpyFvvZESnn2F9NcvrTbi_4ZFtk_jnrg/12/881859056/png/32x32/1/_/1/2/right%20arrow.png/EKDb778JGAcgBygH/t7oQFPS0NWE0eDoqpOOG9ZT1XilNgQf1YSfpkTjlSAI?preserve_transparency=1&size=1280x960&size_mode=3" height="15px" width="15px"/></span></a>
						    <ul>
					           <li><a href="#">HTML</a></li>
							   <li><a href="#">C++</a></li>
                               <li><a href="#">C#</a></li>  							   
							</ul>
						</li>
				        <li><a href="#">PROJECTS</a></li>
                    </ul>						
				 </li>
				 <li><a href="#"> SOFTWARE </a></li>
				 <li><a href="#"> CONTACT </a></li>
			</ul>	 
	    </div> 
	 </div>	
	<br>
</body>
</html>

i dont know how to edit my blogger functionality to make my website drop down menu and sub menu work

6

That code is working as I mentioned above so is of no use to us. We can’t tell what’s not working from code that works.:slight_smile:

You need to supply a demo to where it doesn’t work or supply a link to the page in question.

It could be a number of things from simple specificity to trying to put the menu inside a div with overfow:hidden or any of the other default rules in blogger for lists etc.

7

here is the website link https://vikhub.blogspot.in/ pls sir open it and see
above as mentioned drop down menu code i am trying to put it is not working it is geeting hide the submenus
here the website code you can upload in blogspot as custom template and check it with my html drop down menu code

pls help me with this

8

the demo video i am sharing please see it
u will come to know were i am facing the issue for 2 days i am stuck here reading books to fix not able to fix

9

There is no drop down on that page?

All I need is a page with the menu displayed and I will tell you what’s wrong in seconds.

I’m afraid I’m not signing up to blogger just to install your template for testing :slight_smile:

10

okk wait sir let me add the drop down menu for showing you the issue i added and i removed it let me add again for u pls help me out with this

11

I added it to my website pls check it out
https://vikhub.blogspot.in/

12

Thank you :slight_smile:

That took me 3 seconds to work out what the problem was:). You could have saved yourself days of frustration if you help us to help you right from the start.

As I already guessed you have blogger rules cascading into your menu styles and breaking the menu. Specifically the overflow:hidden as I already mentioned. If you open devtools and look at the styles being applied you can see this straight away.

1200×388 106 KB

Once you know what’s being applied you can build rules that will be more specific and get your menu back into working order. Add the following rules after your original menu rules as they will over-ride and fix a few logic errors also.

#menu {
	position:relative;
	z-index:2;
}
#menu ul {
	overflow:visible;
	max-height:none;
	margin:0;
	padding:0;
}
#menu ul li {
	width:auto;
	white-space:nowrap;
}
#menu li li {
	float:none;
}
#menu li li a {
	display:block;
}
#menu ul ul ul {
	margin:0;
	padding-right:5px;
	left:100%;
}

If you apply those correctly then your menu will work as shown by this screenshot using a live css injection.

1328×373 94.6 KB

4 Likes
13

Thank you sir for helping me with this

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.