Monday, October 10, 2011

CSS Drop Down Menu 1

This is the image for the code given below.This image will show you how your menu will look with this code.



This is the <css>code for the DROP DOWN MENU.


#menu{

margin:0px;

margin-bottom:-10px;

padding-bottom:1px;

text-align: center;

height:40px;

width: 100%;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCfzt4yGaLb-NDEkyHEXBZhLlQ3SNTwb2o0RBOY2K1bduNflEvYOrUqDsG8wkS5ICrY6COHoC-X-NoFi3hWWmSnSd5VUmVxQwZXe9gbYQkPo_6jxC12tz67LUiySRlKy59y_sAKOe_HnM/s800/menu_bg.jpg)repeat-x;

}

ul.dropdown{

margin: auto;

padding:0;

width:960px;

position: relative;

display: block;

height: 40px;

margin-left:0px;

}

#menu li{

list-style: none;

float: left;

margin-left:2.5px;

}

#menu ul ul li{

list-style: none;

float: left;

margin-left:0px;

}

ul.dropdown ul {

position: absolute;

width: 960px;

height: 30px;

top: 30px;

left: 0;

visibility: hidden;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCfzt4yGaLb-NDEkyHEXBZhLlQ3SNTwb2o0RBOY2K1bduNflEvYOrUqDsG8wkS5ICrY6COHoC-X-NoFi3hWWmSnSd5VUmVxQwZXe9gbYQkPo_6jxC12tz67LUiySRlKy59y_sAKOe_HnM/s800/menu_bg.jpg); background-repeat-repeat;

z-index: 598;

margin-left:0px;

padding-left:0px;

}

#menu li a{

width: 133px;

height: 30px;

display: block;

text-decoration:none;

text-align: center;

line-height: 30px;

font-size: 9px;font-family: Verdana;color: #FFFFFF;font-weight: bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpLvZS1RNnhAFxk21sna8q_0QCcicms9kx0LIzmv9C-6MRU2EfKmPt9u657Flur0LqGAlG3boKKpBilLD9XOP4_ilOLtNIqwItpFkzfKXNR1SmQMZfBc3XtmUBTbWJA2iRNoohd47U0s0/s1200/link_bg2.jpg) no-repeat top;

background-repeat:repeat-x;



border-left: solid 1px #0B0B0B;

}

#menu li a:hover{

background-position: bottom;

}

#menu li li a{

width: 145px;

height: 30px;

line-height: 30px;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXW5DJxJsdhmZfeLdlKZNX9etuzLWAe59RKkm41LRYKZSS8I8MlPl_O-EzqYJ_ludGjXPojNG24kA_U_RjWZ7vKXt3s7gt-Vw3e7bpKIXh7OxlXMKDhoco4R_HY4IS6ZUa92PoZdyfnQM/s1600/link_bg1.jpg);

background-repeat:no-repeat;

background-repeat:repeat-x;

text-align: center;

}

#menu li li a:hover{

background-color: #444444;

}

ul.dropdown li:hover > ul {

visibility: visible;

}


This is the <html>code for the DROP DOWN MENU.



<div id='menu'>

<ul class="dropdown">

<li><a href='http://akratheeonlinelearning.blogspot.com/' style='width:100px;'>Home</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/grammar.html' style='width:110px;'>Grammar</a>

<ul>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>Basic Grammar</a>

<ul class='sub' style='height:30px; top:30px;'>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/parts-of-speech_27.html'>Parts of Speech</a>

<ul class='subsub' style='height:30px;'>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/noun.html' style='width:70px;'>Noun</a>

<ul class='subsubsub' style='height:30px; top:30px; '>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/noun-number.html'>Noun-Number</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/noun-gender.html'>Noun-Gender</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/noun-cases.html'>Noun-Case</a></li>

</ul>

</li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/pronoun.html' style='width:90px;'>Pronoun</a>

<ul class='subsubsub' style='height:30px; top:30px; '>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/pronoun-kinds.html'>Kinds of Pronoun</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/pronoun-cases.html'>Pronoun-Case</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/pronoun-uses.html'>Pronoun-Uses</a></li>

</ul>

</li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/adjective.html' style='width:100px;'>Adjective</a>

<ul class='subsubsub' style='height:30px; top:30px; '>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/kinds-of-adjective.html'>Adjective-Kinds</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/formation-of-adjectives.html'>Formation of Adjectives</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/comparison-of-adjectives.html'>Comparison of Adjectives</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/position-of-adjective.html'>Position of Adjective</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/correct-use.html'>Correct Use</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/adjectives-used-as-nouns.html'>Adjectives Used as Nouns</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/determiners.html'>Determiners</a></li>

</ul>

</li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/10/adverb.html' style='width:90px;'>Adverb</a></li>

<li><a href='Verb.html'>Verb</a>

<ul class='subsubsub' style='height:30px;'>

<li><a href='#'>Non-Finite Verb</a></li>

<li><a href='#'>Finite Verb</a></li>

<li><a href='#'>Transitive&amp;Intransitive</a></li>

<li><a href='#'>Incomplete Predication</a></li>

<li><a href='Time &amp; Tense.html'>Time &amp; Tense</a>

<ul class='subsubsubsub' style='height:30px;'>

<li><a href='Present Indefinite.html'>Present Indefinite</a></li>

<li><a href='Present Continuous.html'>Present Continuous</a></li>

<li><a href='Present Perfect.html'>Present Perfect</a></li>

<li><a href='Present Perfect Continuous.html'>Present Perfect continuous</a></li>

<li><a href='Past Indefinite.html'>Past Indefinite</a></li>

<li><a href='Past Continuous.html'>Past Continuous</a></li>

<li><a href='Past Perfect.html'>Past Perfect</a></li>

<li><a href='Past Perfect Continuous.html'>Past Perfect continuous</a></li>

<li><a href='Future Indefinite.html'>Future Indefinite</a></li>

<li><a href='Future Continuous.html'>Future Continuous</a></li>

<li><a href='Future Perfect.html'>Future Perfect</a></li>

<li><a href='Future Perfect Continuous.html'>Future Perfect Continuous</a></li>

<li><a href='#'>Sequence of Tense</a></li>

</ul>

</li>

<li><a href='Voice.html'>Voice Active/Passive</a></li>

</ul>

</li>

<li><a href='#'>Preposition</a></li>

<li><a href='#'>Conjuction</a></li>

<li><a href='#'>Interjection</a></li>

</ul>

</li>



<li><a href='Sentence.html'>Sentence</a>

<ul class='subsub' style='height:30px; top:30px;'>

<li><a href='#'>Subject&amp;Predicate</a></li>

<li><a href='#'>Kinds</a></li>

<li><a href='#'>Simple Sentence</a></li>

<li><a href='#'>Interrogative Sentence</a></li>

<li><a href='#'>Imperative Sentence</a></li>

<li><a href='#'>Opetative Sentence</a></li>

<li><a href='#'>Exclamatory Sentence</a></li>

<li><a href='#'>Sentence Analysis</a></li>

<li><a href='#'>Simple Sentence</a></li>

<li><a href='#'>Complex Sentence</a></li>

<li><a href='#'>COmpound Sentence</a></li>

</ul>

</li>

</ul></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>Applied Grammar</a>

<ul class='sub' style='height:30px; top:30px;'>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/parts-of-speech_27.html'>Parts of Speech</a>

<ul class='subsub' style='height:30px;'>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/noun.html' style='width:70px;'>Noun</a>

<ul class='subsubsub' style='height:30px; top:30px; '>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/noun-number.html'>Noun-Number</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/noun-gender.html'>Noun-Gender</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/noun-cases.html'>Noun-Case</a></li>

</ul>

</li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/pronoun.html' style='width:90px;'>Pronoun</a>

<ul class='subsubsub' style='height:30px; top:30px; '>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/pronoun-kinds.html'>Pronoun-Kinds</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/pronoun-cases.html'>Pronoun-Case</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/2011/09/pronoun-uses.html'>Pronoun-Uses</a></li>

</ul>

</li>

<li><a href='Adjective.html' style='width:100px;'>Adjective</a>

<ul class='subsubsub' style='height:30px; top:30px; '>

<li><a href='#'>Adjective-Kinds</a></li>

<li><a href='#'>Formation of Adjectives</a></li>

<li><a href='#'>Comparison of Adjectives</a></li>

<li><a href='#'>Position of Adjective</a></li>

<li><a href='#'>Correct Use</a></li>

<li><a href='#'>Adjectives Used as Nouns</a></li>

<li><a href='#'>Determiners</a></li>

</ul>

</li>

<li><a href='Adverb.html' style='width:90px;'>Adverb</a></li>

<li><a href='Verb.html'>Verb</a>

<ul class='subsubsub' style='height:30px;'>

<li><a href='#'>Non-Finite Verb</a></li>

<li><a href='#'>Finite Verb</a></li>

<li><a href='#'>Transitive&amp;Intransitive</a></li>

<li><a href='#'>Incomplete Predication</a></li>

<li><a href='Time &amp; Tense.html'>Time &amp; Tense</a>

<ul class='subsubsubsub' style='height:30px;'>

<li><a href='Present Indefinite.html'>Present Indefinite</a></li>

<li><a href='Present Continuous.html'>Present Continuous</a></li>

<li><a href='Present Perfect.html'>Present Perfect</a></li>

<li><a href='Present Perfect Continuous.html'>Present Perfect continuous</a></li>

<li><a href='Past Indefinite.html'>Past Indefinite</a></li>

<li><a href='Past Continuous.html'>Past Continuous</a></li>

<li><a href='Past Perfect.html'>Past Perfect</a></li>

<li><a href='Past Perfect Continuous.html'>Past Perfect continuous</a></li>

<li><a href='Future Indefinite.html'>Future Indefinite</a></li>

<li><a href='Future Continuous.html'>Future Continuous</a></li>

<li><a href='Future Perfect.html'>Future Perfect</a></li>

<li><a href='Future Perfect Continuous.html'>Future Perfect Continuous</a></li>

<li><a href='#'>Sequence of Tense</a></li>

</ul>

</li>

<li><a href='Voice.html'>Voice Active/Passive</a></li>

</ul>

</li>

<li><a href='#'>Preposition</a></li>

<li><a href='#'>Conjuction</a></li>

<li><a href='#'>Interjection</a></li>

</ul>

</li>



<li><a href='Sentence.html'>Sentence</a>

<ul class='subsub' style='height:30px; top:30px;'>

<li><a href='#'>Subject&amp;Predicate</a></li>

<li><a href='#'>Kinds</a></li>

<li><a href='#'>Simple Sentence</a></li>

<li><a href='#'>Interrogative Sentence</a></li>

<li><a href='#'>Imperative Sentence</a></li>

<li><a href='#'>Opetative Sentence</a></li>

<li><a href='#'>Exclamatory Sentence</a></li>

<li><a href='#'>Sentence Analysis</a></li>

<li><a href='#'>Simple Sentence</a></li>

<li><a href='#'>Complex Sentence</a></li>

<li><a href='#'>COmpound Sentence</a></li>

</ul>

</li>

</ul></li>

</ul>

</li>

<li>

<a href='http://akratheeonlinelearning.blogspot.com/2011/09/exercises.html'>Exercises</a>

<ul style='margin-left:300px; width:400px;'>

<li><a href='Objective Grammar.html'>Objective Grammar</a></li>

<li><a href='Objective Literature.html'>Objective Literature</a></li>

</ul>

</li>

<li>

<a href='http://akratheeonlinelearning.blogspot.com/2011/09/spoken-english.html'>Spoken English</a>

<ul>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee1</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee2</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee3</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee4</a></li>

</ul>

</li>

<li>

<a href='http://akratheeonlinelearning.blogspot.com/2011/09/computer-learning.html'>Computer Learning</a>

<ul>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee1</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee2</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee3</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee4</a></li>

</ul>

</li>

<li>

<a href='http://akratheeonlinelearning.blogspot.com/2011/09/composition.html'>Composition</a>

<ul>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee1</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee2</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee3</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee4</a></li>

</ul>

</li>

<li>

<a href='http://akratheeonlinelearning.blogspot.com/2011/10/english-for-tests.html' style='width:189px;'>English for Competitive Exams</a>

<ul>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee1</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee2</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee3</a></li>

<li><a href='http://akratheeonlinelearning.blogspot.com/'>akrathee4</a></li>

</ul>

</li>

</ul>

</div>

Posted by Ashok Kumar Rathee (M.A.English) at 12:24 PM 0 comments

Css Drop Down Menu 2

This is the image for the code given below.This image will show you how your menu will look with this code.



This is the <css>code for the DROP DOWN MENU.


#nav {
width:950px;
height:36px;
text-align:center;
background-color:#0CF;
margin: 0 auto;
_background-image:url(../images/Untitled-2.png);
background-repeat: no-repeat;
}


ul.dropdown {
float: left;
margin: 0px;
list-style-type: none;
list-style-image: url(none);
position: relative;
z-index: 597;
padding: 0px;
}


ul.dropdown a:visited {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFF;
text-decoration: none;
}


ul.dropdown a:hover {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFF;
text-decoration: none;
}


ul.dropdown a:link {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFF;
text-decoration: none;
text-align: center;
}


ul.dropdown ul {
margin: 0px;
width: 200px;
list-style-image: url(none);
list-style-type: none;
position: absolute;
z-index: 598;
left: 0px;
top: 100%;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
visibility: hidden;
}




ul.dropdown li {
line-height: 1.3em;
margin: 0px;
vertical-align: middle;
float: left;
padding-top: 7px;
padding-right: 9px;
padding-left: 10px;
border: 1px solid #999999;
list-style-image: none;
list-style-type: none;
border-bottom: 0px;
border-top:0px;
border-color:#929be9;
padding-bottom: 7px;
}


ul.dropdown li:hover {
position: relative;
z-index: 599;
font-weight: normal;
background-color:#0FF;
}


ul.dropdown li:hover > ul {
visibility: visible;
}


ul.dropdown ul li {
float: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-top: 10px;
line-height: 15px;
background-color:#00C;
_background-image: url(../images/Untitled-3.png);
background-repeat:repeat-y;
padding-bottom: 10px;
background-color:#609;
border-bottom:solid 1px #CCC;
}


ul.dropdown ul ul {
left: 100%;
top: 0px;
}


This is the <html>code for the DROP DOWN MENU.



  <div id="nav">

<ul class="dropdown">

  <li><a href="default.htm">Home</a></li>

      <li><a style="text-align: center" href="Grammar.html">Grammar</a>

  <ul>

      <li><a href="Parts of Speech.html">Parts of Speech</a>

  <ul>

      <li><a href="Noun.html">Noun</a></li>

      <li><a href="Pronoun.html">Pronoun</a></li>

      <li><a href="Adjective.html">Adjective</a></li>

      <li><a href="Adverb.html">Adverb</a></li>

      <li><a href="Verb.html">Verb</a></li>

      <li><a href="Preposition.html">Preposition</a></li>

      <li><a href="Conjunction.html">Conjunction</a></li>

      <li><a href="Interjection.html">Interjection</a> </li>

   </ul></li>

    <li><a href="Sentence.html">Sentence</a></li>

    <li><a href="Voice.html">Voice</a></li>

    <li><a href="Narration.html">Narration</a> </li>

  </ul></li>

  <li><a href="Literature.html">Literature</a> </li>

  <li><a href="Objective Questions.html">Objective Questions</a>

  <ul>

  <li><a href="Objective Grammar.html">Objective Grammar</a> </li>

  <li><a href="Objective Literature.html">Objective Literature</a> </li>

  </ul></li>

  <li><a href="World of Words.html">World of Words</a> </li>

  <li><a href="World of Words.html">Composition</a> </li>

  <li><a href="Spoken English.html">Spoken English</a> </li>

  <li><a href="Contact Us.html">Contact Us</a></li>

  <li style="border-right-style:none"><a href="Faq.html">Faq

  </a></li>

  </ul>

  </div>

Posted by Ashok Kumar Rathee (M.A.English) at 12:22 PM 2 comments
Subscribe to: Posts (Atom)