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&Intransitive</a></li>
<li><a href='#'>Incomplete Predication</a></li>
<li><a href='Time & Tense.html'>Time & 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&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&Intransitive</a></li>
<li><a href='#'>Incomplete Predication</a></li>
<li><a href='Time & Tense.html'>Time & 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&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>
0 comments:
Post a Comment
If you have any suggestion, question or comment, you can write here.