<style type="text/css">
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 32px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
padding:0px 0px 0px 0px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#333333;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{

}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #444444;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 0em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}

</style>

<div id="menu9">
<ul>
  <li><a href="http://techpraiser.blogspot.in/">
<span class="title">Home</span>
</a>
</li>
<li><a href="">
<span class="title">HW & NW</span>

<a href="http://techpraiser.blogspot.in/"><span class="text">Hardware</span> </a>
<span class="text">Networking</span>
</a>
</li>
<li><a href="">
<span class="title">OS</span>
<span class="text">Windows</span>
<span class="text">Mac OS</span>
<span class="text">Linux</span>
</a>
</li>
<li><a href="">
<span class="title">Graphics</span>
<span class="text">Graphics Design</span>
<span class="text">Web Design</span>
<span class="text">Video Editing</span>
</a>
</li>
<li><a href="">
<span class="title">Blogging</span>
<span class="text"> Google Blooger</span>
<span class="text"> Word Press</span>
</a>
</li>
</ul></div>

`

Recommended Answers

All 2 Replies

What is your question?

be more specific

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.