UL tag, BR Tag, Li Tag, Hyperlink Tag, Para tag p

Use of <ul> Tag

Use of <br> Tag

Use of <li> Tag

Use of <a href=" "> tag

Making hyperlinks

Combination of different tags: (Description)

Making a para using <p> </p> tags, then make a list using <ul> </ul> tags, then define list contents by using <li> </li>, Inserting a Hyperlinks and use <br> tag to separate every hyperlink. 

Codes that we are using in this example are given below:

<p> </p>
<ul> </ul>
<li> </li>
<a href=" "> </a>
<br>

Example:

<p>

<ul>

      <li><a href="http://digicom007.blogspot.com"> Digital Communications </a></li>
      <li><a href="http://hotseat2011.blogspot.com/  ">Hotseat2011    </a></li>
<br />
      <li><a href="http://cpp-hotseat.blogspot.com/  ">Computer Science    </a></li>
<br />
      <li><a href="http://islamicircle.blogspot.com/ "> Deen aur Duniya   </a></li>
<br />
      <li><a href="http://google.com.pk/ ">  Entertainment  </a></li>
<br />
      <li><a href=" *****  ">Education    </a></li>
<br />
      <li><a href=" *****  " title="Virtual Communication and Presentations">VCAPs    </a></li>
<br />
      <li><a href=" *****   ">Fantasy    </a></li>

</ul>

</p>

---

By: Digital Communication

---

BR Tag

Use of <br> Tag> in Hyperlinks
Example:

<!--Use of a <BR> TAG -->


<a href="http://digicom007.blogspot.com"> Digital Communications </a>

<br />
<a href=" your link address "> example     </a></li>

<br />

visit: Digicom007.blogspot.com

---

By: Digital Communication

---

Use of <ul> Tag

Inserting a Hyperlinks into List form

Example:
<!-- here is the example to use List tag <ul> and to practice that how we can insert list of Hyperlinks in List form, in our HTML Page. -->

** Delete the given blue colored links and put your own between "  "
<ul>
<li><a href="http://digicom007.blogspot.com"> Digital Communications </a></li>
<li><a href="http://hotseat2011.blogspot.com/  ">Hotseat2011    </a></li>
<li><a href="http://cpp-hotseat.blogspot.com/  ">Computer Science    </a></li>
<li><a href="http://islamicircle.blogspot.com/ "> Deen aur Duniya   </a></li>
<li><a href="http://desibeatspk.blogspot.com/ ">  Entertainment  </a></li>
<li><a href="http://cs602quiz.blogspot.com/ ">Education    </a></li>
<li><a href="http://vcaps.wordpress.com/ " title="Virtual Communication and Presentations">VCAPs    </a></li>
<li><a href="http://fantasygl.wordpress.com/ ">Fantasy    </a></li>
</ul>

---

By: Digital Communication

---

Use of Div Tag

Div tag <div>

How to set the style and background of a <div> tag?

Use of <div>  Tag,

Example:

                           <div style="background:#c0c0c0">

<!-- Insert your data between <div> and </div>  -->

                            </div>

A to Z Pictures

---

By: Digital Communication

---

Dropdown Menu Complete Sample code

Complete Dropdown Menue Snapshot

Complete Dropdown Menue Code:(Below)

For Blogger: Place this code in the Blogger Gadget.( Insert a gadget of  from the gadgets to Enter HTML/Javascript)

<div id='mbtnavbar'>

<ul id="suckerfishnav" class="sf-menu">

        <li>

          <a href='http://hotseat2011.blogspot.com/'>Home Page</a>

        </li>

        <li>

          <a href='http://vcaps.wordpress.com/about/'>About</a>

       </li>

        <li>

          <a href='http://hotseat2011.wordpress.com/about/contact/'>Contact Us</a>

        </li>

  <li>

           <a href='http://digicom007.blogspot.com'>Digital  007</a>

            <ul>

                <li><a href='http:// '>Music</a></li>

                <li><a href='http://  ‘>Pictures</a></li>

                <li><a href='http:// '>Poetry</a></li>

              </ul>

        </li>

<li><a href="http://  ">Menu 1</a></li>

<ul>

<li><a href="http://  ">Submenu -2</a></li>

<li><a href="http://vcaps.wordpress.com/sahih-bukhari-shafeef-in-urdu-vol-1/sahih-bukhari-shafeef-in-urdu-vol-3/" title="Sub -3"> Sub Menu-3</a></li>

</ul></ul>

</div><br /><br /><br /><br /><br /><br /><br />

Ø   The CSS CODE for Dropdown Menu :

Enter this CSS code before: ]]></b:skin>

div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }

ul#navigation-1

 { margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

 ul#navigation-1 li

 { margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

 ul#navigation-1 li a:link,

 ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, 

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

div#container 

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active 

{ font-weight:bold; color:#b9121b; }

ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

 ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }

 ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation- 

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

  

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

Ø   <!-- My menue bar setting for IE -->

Enter This code for IE before ]]></b:skin>

#suckerfishnav li:hover, #suckerfishnav li.hover {

position:static;

Ø      Then Enter the code given below Before: </b:template-skin>

#suckerfishnav {

    background:#6E9F1F url(&quot;../multi-level-navigation-plugin/images/suckerfish_green.png&quot;) repeat-x;

    font-size:18px;

    font-family:verdana,sans-serif;

    font-weight:bold;

    width:100%;

    }

#suckerfishnav, #suckerfishnav ul {

    float:left;

    list-style:none;

    line-height:40px;

    padding:0;

    border:1px solid #aaa;

    margin:0;

    width:100%;

    }

#suckerfishnav a {

    display:block;

    color:#dddddd;

    text-decoration:none;

    padding:0px 10px;

    }

#suckerfishnav li {

    float:left;

    padding:0;

    }

#suckerfishnav ul {

    position:absolute;

    left:-999em;

    height:auto;

    width:151px;

    font-weight:normal;

    margin:0;

    line-height:1;

    border:0;

    border-top:1px solid #666666;

    }

#suckerfishnav li li {

    width:149px;

    border-bottom:1px solid #666666;

    border-left:1px solid #666666;

    border-right:1px solid #666666;

    font-weight:bold;

    font-family:verdana,sans-serif;

    }

#suckerfishnav li li a {

    padding:4px 10px;

    width:130px;

    font-size:12px;

    color:#dddddd;

    }

#suckerfishnav li ul ul {

    margin:-21px 0 0 150px;

    }

#suckerfishnav li li:hover {

    background:#6E9F1F;

    }

#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {

    color:#dddddd;

    }

#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {

    color:#dddddd;

    }

#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {

    color:#dddddd;

    }

#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {

    left:-999em;

    }

#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {

    left:auto;

    background:#444444;

    }

#suckerfishnav li:hover, #suckerfishnav li.sfhover {

    background:#9DDD35;

    }

Ø     Then Enter the Below code for Dropdown Menue Before: </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>

  <script type='text/javascript'>

  //<![CDATA[

var timeout    = 500;

  var closetimer = 0;

  var ddmenuitem = 0;

function jsddm_open()

  {  jsddm_canceltimer();

  jsddm_close();

  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()

  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()

  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()

  {  if(closetimer)

  {  window.clearTimeout(closetimer);

  closetimer = null;}}

$(document).ready(function()

  {  $('#jsddm > li').bind('mouseover', jsddm_open)

  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

  //]]>

  </script>

<script src='suckerfish_keyboard.js' type='text/javascript'/>

<!--[if lte IE 7]>

<script type="text/javascript" src="suckerfish_ie.js"></script>

<![endif]-->

Drop down menu is not working in Chrome or Firefox?

If the dropdown menu is not working in the Chrome or Firefox explorer then fix that with the help of this:

Fix the Dropdown menu without adding z-index to the head div.

#head {
    position:relative;
    height: 140px;
    width: 100%;
    background: #FFF;
    filter:alpha(opacity=93);
    padding-top:20px;
    /* CSS3 standard */
    opacity:0.93;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
}

________________________________________________________________