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>
where is the image url link?
ReplyDeleteIn which part of "edit HTML" shall I put css code?
Dear TEKUSH
ReplyDeleteIn css code you will find the line (_background-image: url(../images/Untitled-3.png);) change this line with (background-image: url(../images/Untitled-3.png);)and you can write the image url after the url. Your code should be like this background-image: url(copy and paste the url of your own image here);.