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>

0 comments:

Post a Comment

If you have any suggestion, question or comment, you can write here.