Dropdown Menu Failed

[loserone+_+]

whats wrong with my css code for

<nav><ul><li><a href="#">HOME</a></li><li><a href="#">ACCESORY</a></li>	  <ul>	  <li><a href="#">Dropdown Menu1</a></li>	  <li><a href="#">Dropdown Menu2</a></li>	  <li><a href="#">Dropdown Menu3</a></li>	  </ul><li><a href="#">ABOUT ME</a></li></ul></nav>

and my css code here

nav ul ul {		  display: none;		  }nav ul li:hover>ul {					 display: block;					 }nav ul {	   background: #009933;	   background: linear-gradient(top, #009933 0%, #bbbbbb 100%);	   background: -moz-linear-gradient(top, #009933 0%, #bbbbbb 100%);	   background: -webkit-linear-gradient(top, #009933 0%, #bbbbbb 200%);	   box-shadow: 0px 0px 9px r gba(0,0,0,0,15);	   padding: 0 20px;	   border-radius: 25px;	   list-style: none;	   position: relative;	   display: inline-table;	   }nav ul:after {	   content: ""; clear: both; display: block;			 }nav ul li {	   float: left;		  }nav ul li: hover {	   background: #66FF66;	   background: linear-gradient(top, #47B247 0%, #59BA59 40%);	   background: -moz-linear-gradient(top, #47B247 0%, #59BA59 40%);	   background: -webkit-linear-gradient(top, #47B247 0%, #59BA59 40%);			    }nav ul li: hover a {	   color: #fff;				   }nav ul li a {	  display: block;	  padding: 25px 40px;	  color: #993300;	  text-decoration: none;		    }   nav ul ul {	  background: #59BA59; border-radius: 0px; padding: 0;	  position: absolute; top: 100;		  }nav ul ul li {	  float: none;	  border-top: 1px solid #A30000;	  border-bottom: 1px solid #3333FF;	  position: relative;			 }nav ul ul li a {	  padding: 15px 40px;	  color: #fff;			   }nav ul ul li a:hover {	  background: #3333FF;					 }nav ul ul ul {	  position: absolute; left: 100%; top:0;			 }

by the way this is not my code,i get it from here,http://www.handy-html.com/create-a-simple-css-dropdown-menu/and the funny thing this code only works in Internet Explorer 9 and 8but bugs on the Internet Explorer 9 and 8here is the thing what i mean to on the attached files,Whats wrong then? Any ideas?

[RezaRohani]

With these changes, u can get result in all browsers, except 'IE'.But for 'IE', you must make major changes in your code.

    <nav>	    <ul>		    <li><a href="#">HOME</a></li>		    <li><a href="#">ACCESORY</a><!-- /*-------change-------*/ -->			    <ul>				    <li><a href="#">Dropdown Menu1</a></li>				    <li><a href="#">Dropdown Menu2</a></li>				    <li><a href="#">Dropdown Menu3</a></li>			    </ul>		    </li><!-- /*--------change-------*/ -->		    <li><a href="#">ABOUT ME</a></li>	    </ul>    </nav>

CSS:

	    nav ul ul	    {		    margin-top: -32px;/*-----------change-----------*/		    display: none;	    }	    nav ul li:hover > ul	    {		    display: block;	    }	    nav ul	    {		    background: #009933;		    background: linear-gradient(top, #009933 0%, #bbbbbb 100%);		    background: -moz-linear-gradient(top, #009933 0%, #bbbbbb 100%);		    background: -webkit-linear-gradient(top, #009933 0%, #bbbbbb 200%);		    box-shadow: 0px 0px 9px r gba(0,0,0,0,15);		    padding: 0 20px;		    border-radius: 25px;		    list-style: none;		    position: relative;		    display: inline-block;	    }	    nav ul:after	    {		    content: "";		    clear: both;		    display: block;	    }	    nav ul li	    {		    float: left;	    }	    nav ul li: hover	    {		    background: #66FF66;		    background: linear-gradient(top, #47B247 0%, #59BA59 40%);		    background: -moz-linear-gradient(top, #47B247 0%, #59BA59 40%);		    background: -webkit-linear-gradient(top, #47B247 0%, #59BA59 40%);	    }	    nav ul li: hover a	    {		    color: #fff;	    }	    nav ul li a	    {		    display: block;		    padding: 25px 40px;		    color: #993300;		    text-decoration: none;	    }	    nav ul ul	    {		    background: #59BA59;		    border-radius: 0px;		    padding: 0;		    position: absolute;		    top: 100;	    }	    nav ul ul li	    {		    float: none;		    border-top: 1px solid #A30000;		    border-bottom: 1px solid #3333FF;		    position: relative;	    }	    nav ul ul li a	    {		    padding: 15px 40px;		    color: #fff;	    }	    nav ul ul li a:hover	    {		    background: #3333FF;	    }	    nav ul ul ul	    {		    position: absolute;		    left: 100%;		    top: 0;	    }

Edited February 20, 2013 by RezaRohani

[loserone+_+]

yeahh i can see that,but for csswhy u adding

margin-top: -32px;

whats that code for to?

Edited February 20, 2013 by loserone+_+

[dsonesuk]

Below IE9 versions won't produce rounded corners (google PIE.htc) and won't recognise nav element unless you use

<script type="text/javascript">    document.createElement("nav");</script>

filter:progid:DXImageTransform.Microsoft.gradient() will produce gradient for IE, but will not allow border-radius, at same time, (I know, IE is CRAP!)

<style type="text/css">nav ul, nav li { padding:0; margin:0; text-indent: 0; list-style-type:none;}/*parent top UL and LI */		    nav ul		    {				    background: #009933;                    				    background: linear-gradient(top, #009933 0%, #bbbbbb 100%);                    background-image:-ms-linear-gradient(top, #009933 0%, #bbbbbb 100%);                    background: -moz-linear-gradient(top, #009933 0%, #bbbbbb 100%);                    background-image:-o-linear-gradient(top, #009933 0%, #bbbbbb 100%);				    background: -webkit-linear-gradient(top, #009933 0%, #bbbbbb 100%);                               		 border-radius: 25px;                    box-shadow: 0px 0px 9px r gba(0,0,0,0,15);				    padding: 0 20px;				    				    list-style: none;				    /*position: relative; removed by dsonesuk */				    display: inline-block;		    }	            nav ul:after		    {				    content: "";				    clear: both;				    display: block;		    }                      nav ul li		    {				    float: left;                    position: relative; /*added by dsonesuk */		    }                        nav ul li:hover		    {				    background: #66FF66;                                        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59);				    background: linear-gradient(top, #47B247 0%, #59BA59 40%);                    background-image:-ms-linear-gradient(top, #47B247 0%, #59BA59 40%);				    background: -moz-linear-gradient(top, #47B247 0%, #59BA59 40%);                    background-image:-o-linear-gradient(top, #47B247 0%, #59BA59 40%);				    background: -webkit-linear-gradient(top, #47B247 0%, #59BA59 40%);                                    		    }		    nav ul li:hover a		    {				    color: #fff;		    }		    nav ul li a		    {				    display: block;				    padding: 25px 40px;				    color: #993300;				    text-decoration: none;		    }                     nav ul li:hover > ul		    {				    display: block;		    }                                    /* submenu lev 1 and above */            nav ul ul		    {				    /*margin-top: 32px;-----------change----------- removed by dsonesuk*/				    display: none;                    position: absolute; /*added by dsonesuk */				    left: 0; /*added by dsonesuk */				    top:70px;/*added by dsonesuk - MUST DEFINE AT VERY LEAST TOP AND LEFT PROPERTIES*/                                        background: #59BA59;				    border-radius: 0px;				    padding: 0;		    }		    nav ul ul li		    {				    float: none;				    border-top: 1px solid #A30000;				    border-bottom: 1px solid #3333FF;				    /*position: relative; removed by dsonesuk*/		    }		    nav ul ul li a		    {				    padding: 15px 40px;				    color: #fff;		    }            		    nav ul ul li a:hover		    {				    background: #3333FF;		    }		   /* nav ul ul		    {				    background: #59BA59;				    border-radius: 0px;				    padding: 0;				    position: absolute;				    top: 100;		    } DUPLICATE CONTENT*//* submenu lev 2 and above */		   nav ul ul ul		    {				    top: 0;		    }</style><!--[if IE]><style type="text/css">nav ul ul		    {            top:68px; /*fix IE crap*/            }</style><![endif]-->

[RezaRohani]

whats that code for to?

I had a little time. So I just tried your menu work correctly.There was a gap between the sub menu and the main menu. "margin top" was added to remove this gap.

(I know, IE is CRAP!)

Yess!

[loserone+_+]

yeahhh its fixed :)thanks with all of your helpbut the problem not solved at all,i know i am rude but why the dropdown menu didnt highlight?i mean its drop on the back not the top,sorry i cant insert any image, i cant figure it out how to inserting image in quickpost reply, and sorry for asking more help because i cant figure it out whats wrong with it really

[dsonesuk]

??? i don't know what you mean? IF you mean the PARENT top menu highlights in blue like the submenu change

nav ul ul li a:hover {	background: none repeat scroll 0 0 #3333FF;}

to

nav ul li a:hover {	background: none repeat scroll 0 0 #3333FF;}

[loserone+_+]

sorry if i didnt get the better explain,i already figured it out how to attach files :)so see my thumbnail below anyway thanks for reply :)and sorry for my bad the condition are bad, and i cant figured it outthe same thing happened on 3 most famous browser, firefox,chrome and safari.

[dsonesuk]

try adding high z-index value.

       	 nav ul ul		    {				    /*margin-top: 32px;-----------change----------- removed by dsonesuk*/				    display: none;                    position: absolute; /*added by dsonesuk */				    left: 0; /*added by dsonesuk */				    top:68px;/*added by dsonesuk - MUST DEFINE AT VERY LEAST TOP AND LEFT PROPERTIES*/                                        background: #59BA59;				    border-radius: 0px;				    padding: 0;                                        z-index: 9999;/*added by dsonesuk */		    }

[loserone+_+]

yeahh it solved the problem :)for Firefox, Safari and Chrome IE still sucks by the way :(and i trying the z-index on the css code here,

 <!--[if IE]><style type="text/css">nav ul ul {    top: 68px;     z-index: 9999;               }</style><![endif]-->]]></b:skin>

i though its the same " nav ul ul { " line under the sub or parent " nav ul, nav li "but it seems my wrong,IE sucks, yeahh. but IE still browsers that people used to in mine country

[dsonesuk]

You only add styling to IE condition, that is required to be different from the default styling used in the nav ul ul {....} above it! if the content below this is within a container, such as a div, article, or section, try given it a position: relative; if that does not work on its own, try it by adding a lower z-index than given to submenu UL.

Edited February 22, 2013 by dsonesuk

[loserone+_+]

yeahh i add in the code in nav ul ul { sub menu code,u mean like this?

nav ul ul {      display: none;      position: absolute;      left: 0;      top: 68px;      background: #59BA59;      border-radius: 0px;      padding: 0;      z-index: 9999;          }

i already changin the position: relative;and adding the z-index too,but changin the position: relative;it turn bad, lol "if that does not work on its own, try it by adding a lower z-index than given to submenu UL." let me guess u mean, i must giving the z-index to all the nav ul, nav li css right?

[dsonesuk]

No! i have no idea what you have used for the other page elements that surround the content BELOW the menu, you coild be using position: absolute for all I know, and if you are! which you should not be doing anyway, this will have a bearing on how the menu acts, as the menu works fine for me, so i can only come to the conclusion its something to do with the content element containers below it, and that is the problem, not the menu. That is why i suggested you add position: relative; to the content contaiiner just below the menu, and if that does not work, trying adding a z-index as well.

[loserone+_+]

nav ul ul {  	  display: none;  	  position: relative; <!--Changed by loserone+_+ -->  	  left: 0;  	  top: 68px;  	  background: #59BA59;  	  border-radius: 0px;  	  padding: 0;  	  z-index: 9999; <!--This z-index only available on the browsers except IE-->		  }

lol i guess. this what ur meaning right ?

so i can only come to the conclusion its something to do with the content element containers below it, and that is the problem, not the menu

nahh, this is what i didnt know about,my english was bad, so can u give me an example,its okay for another example didnt related though,all i want to learn not from copy paste and claim thats mine work Edited February 23, 2013 by loserone+_+

[dsonesuk]

nav ul ul {            display: none;            position: relative; <!--Changed by loserone+_+ -->            left: 0;            top: 68px;            background: #59BA59;            border-radius: 0px;            padding: 0;            z-index: 9999; <!--This z-index only available on the browsers except IE-->                  }

NO! this is TOTALLY WRONG!using position: relative, WRONG! should be as i shown position: absoluteusing <!--Changed by loserone+_+ --> WRONG for css to use comments within CSS it should be /* Changed by loserone+_+ */THIS! is correct do not! change, it works for ALL browsers even crappy IE

 nav ul ul                    {                    /*margin-top: 32px;-----------change----------- removed by dsonesuk*/                    display: none;                    position: absolute; /*added by dsonesuk */                    left: 0; /*added by dsonesuk */                    top:70px;/*added by dsonesuk - MUST DEFINE AT VERY LEAST TOP AND LEFT PROPERTIES*/                    background: #59BA59;                    border-radius: 0px;                    padding: 0;                    z-index: 9999;/*added by dsonesuk */                    }

but IE being crappy does not follow the same rules as better browsers do so you sometimes have use a conditional comment for IE, so it looks the same as other better browser by changing the styling on specific element that will only target IE to correct the srcew up it has made.

<!--[if IE]><style type="text/css">nav ul ul                    {            top:68px; /*fix IE crap*/            }</style><![endif]-->

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><!--[if IE]><script type="text/javascript">    document.createElement("article");    document.createElement("header");    document.createElement("section");    document.createElement("nav");</script><![endif]--><style type="text/css">*{padding:0;margin:0;}body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}p {margin:1em 0;}h1, h2, h3, h4, h5, h6{margin:0.9em 0;}h1 {font-size:2em;}h2 {font-size:1.84em;}h3 {font-size:1.68em;}h4{font-size:1.52em;}h5 {font-size:1.36em;}h6 { font-size:1.20em;}nav { margin:10px; font-size: 14px; float:left;}nav ul, nav li { padding:0; margin:0; text-indent: 0; list-style-type:none;}header {}/*parent top UL and LI */            nav ul            {                    background: #009933;                    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#009933, endColorstr=#bbbbbb);                    background: linear-gradient(top, #009933 0%, #bbbbbb 100%);                    background-image:-ms-linear-gradient(top, #009933 0%, #bbbbbb 100%);                       background: -moz-linear-gradient(top, #009933 0%, #bbbbbb 100%);                    background-image:-o-linear-gradient(top, #009933 0%, #bbbbbb 100%);                    background: -webkit-linear-gradient(top, #009933 0%, #bbbbbb 100%);                                       border-radius: 25px;                    box-shadow: 0px 0px 9px r gba(0,0,0,0,15);                    padding: 0 20px;                    behavior: url(../../css3/PIE.php);                    list-style: none;                    /*position: relative; removed by dsonesuk */                    display: block;                               }               nav ul:after            {                    content: "";                    clear: both;                    display: block;            }                    nav ul li            {                    float: left;                    position: relative; /*added by dsonesuk */            }                       nav ul li a            {                    display: block;                    padding: 25px 40px;                    color: #993300;                    text-decoration: none;            }                       nav ul li:hover            {                    background: #66FF66;                                       background: linear-gradient(top, #47B247 0%, #59BA59 40%);                    background-image:-ms-linear-gradient(top, #47B247 0%, #59BA59 40%);                    background: -moz-linear-gradient(top, #47B247 0%, #59BA59 40%);                    background-image:-o-linear-gradient(top, #47B247 0%, #59BA59 40%);                    background: -webkit-linear-gradient(top, #47B247 0%, #59BA59 40%);                                                 }        nav ul li:hover a            {                    color: #fff;            }         nav ul li:hover > ul            {                    display: block;            }                                  /* submenu lev 1 and above */            nav ul ul            {                    display: none;                    position: absolute; /*added by dsonesuk */                    left: 0; /*added by dsonesuk */                    top:67px;/*added by dsonesuk - MUST DEFINE AT VERY LEAST TOP AND LEFT PROPERTIES*/                                                                             border-radius: 0px;                    padding: 0;                                       z-index: 9999;            }            nav ul ul li            {                    float: none;                    border-top: 1px solid #A30000;                    border-bottom: 1px solid #3333FF;            }            nav ul ul li a            {                    padding: 15px 40px;                    color: #fff;            }                       nav ul ul li a:hover            {                    background: #3333FF;            }/* submenu lev 2 and above */           nav ul ul ul            {                    top: 0;            }#wrapper {width:960px; margin:0 auto;}#content { clear: both;}#header {height:200px; background-color:#66CC99;}</style><!--[if IE]><style type="text/css">nav ul ul            {            top:66px;            }</style><![endif]--><!--[if gte IE 8]><style type="text/css">            nav ul li:hover            {                    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59);                    }</style><![endif]--></head><body><div id="wrapper"><div id="header"></div><nav><ul><li><a href="#">HOME</a></li><li><a href="#">ACCESORY</a>          <ul>          <li><a href="#">Dropdown Menu1</a></li>          <li><a href="#">Dropdown Menu2</a></li>          <li><a href="#">Dropdown Menu3</a></li>          </ul></li><li><a href="#">ABOUT ME</a></li></ul></nav><div id="content"><section><article>  <p>Ut enim ad minim veniam, excepteur sint occaecat in reprehenderit in voluptate.    Lorem ipsum dolor sit amet, sunt in culpa ut aliquip ex ea commodo consequat.    Ut enim ad minim veniam, qui officia deserunt ullamco laboris nisi. Consectetur    adipisicing elit, excepteur sint occaecat in reprehenderit in voluptate.</p>  <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt eu fugiat nulla    pariatur. Consectetur adipisicing elit, velit esse cillum dolore. Ut aliquip    ex ea commodo consequat. Ut labore et dolore magna aliqua.</p>  <p>Duis aute irure dolor sed do eiusmod tempor incididunt qui officia deserunt.    Excepteur sint occaecat sunt in culpa cupidatat non proident. In reprehenderit    in voluptate velit esse cillum dolore qui officia deserunt. Eu fugiat nulla    pariatur.</p>  <p>Excepteur sint occaecat ut enim ad minim veniam, quis nostrud exercitation.    Duis aute irure dolor lorem ipsum dolor sit amet. Ut enim ad minim veniam,    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit    in voluptate excepteur sint occaecat.</p>  <p>Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut aliquip ex    ea commodo consequat. Cupidatat non proident, ut enim ad minim veniam, quis    nostrud exercitation. Eu fugiat nulla pariatur. Sunt in culpa consectetur    adipisicing elit, ut labore et dolore magna aliqua.</p>  <p>Duis aute irure dolor lorem ipsum dolor sit amet. Quis nostrud exercitation    eu fugiat nulla pariatur. Cupidatat non proident, ut labore et dolore magna    aliqua. Sunt in culpa consectetur adipisicing elit, velit esse cillum dolore.</p>  <p>Eu fugiat nulla pariatur. Ut enim ad minim veniam, ut aliquip ex ea commodo    consequat. Ut labore et dolore magna aliqua.</p>  <p>Ullamco laboris nisi in reprehenderit in voluptate qui officia deserunt.    Excepteur sint occaecat velit esse cillum dolore cupidatat non proident.    Duis aute irure dolor consectetur adipisicing elit, sed do eiusmod tempor    incididunt.</p>  <p>Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, mollit anim    id est laborum. Excepteur sint occaecat ullamco laboris nisi sed do eiusmod    tempor incididunt. Ut aliquip ex ea commodo consequat. Cupidatat non proident,    ut enim ad minim veniam, velit esse cillum dolore.</p>  <p>Qui officia deserunt excepteur sint occaecat mollit anim id est laborum.    Ullamco laboris nisi. Eu fugiat nulla pariatur. Consectetur adipisicing elit,    cupidatat non proident, duis aute irure dolor. Sed do eiusmod tempor incididunt    mollit anim id est laborum.</p>    </article>    </section></div></div></body></html>

Edited February 23, 2013 by dsonesuk

[loserone+_+]

ohh, /* [Text Here] */ for css comment, let me guessin again, so the first time,

<!--[if IE]> <script type="text/javascript">     document.createElement("article");     document.createElement("header");     document.createElement("section");     document.createElement("nav"); </script> <![endif]--> 

IE must had Element Create add by javascript

<!--[if IE]> <style type="text/css"> nav ul ul {             top:66px;               } </style> <![endif]-->  <!--[if gte IE 8]> <style type="text/css"> nav ul li:hover { filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59);                   	 } </style> <![endif]-->

and IE must had CSS add using <!--[if IE]> ended with <![endif]--> and that will fix the all IE crappy for this dropdown menuam i right? whats the ,filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59); what will changin for the IE browser?

[dsonesuk]

(1) crappy IE below IE9, don't recognise new html5 elements, so any that you use within html5, you will have to use createElement(), so these older crappy IE will apply will recognise and apply css styling to.(2) IE conditional comments, were made specifically to target IE browsers, because they don't follow the same rules as other better browser, we have to add specific css styling, JavaScript that are only applied to the IE browser that the IE comment condition specifically targeted.(3) filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#47B247, endColorstr=#59BA59); applies gradient to IE greater or equal to version 8, because crappy IE developers are really, really ######ty and slow to catch up with new css3 styling such as gradient, rounded corner etc, hacks, or code are produced to give these crappy IE browsers the ability to look similar the other better browser counterparts, but these have drawbacks, trying to apply gradient and rounded corners, at the same time causes one or both of these to fail, this gradient fix applied to IE7 causes the submenu, to be hidden, and i got bored, and just did the best i could to get menu to work, that's why it is set to be used on IE8 and above, for submenu, only!

[loserone+_+]

okay i understand,all the problem fixed and this thread closedthanks for all of your help dsonesuk