Οριζόντιο μενου με υποκαρτέλες

Ακολουθήστε τα παρακάτω βήματα για να την βάλετε κι εσείς:

1. Σύνδεση στον blogger λογαριασμό από το blogger.com
2. Πανόπτης> Σχεδίαση> Επεξεργασία html
3. Με το ctrl+F βρείτε το </head>
4. Πάνω από αυτό επικολλήστε το παρακάτω:

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(http://i47.tinypic.com/23gy3yp.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu a:hover {
background:url(http://i50.tinypic.com/2il0gt5.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(http://i47.tinypic.com/23gy3yp.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(http://i50.tinypic.com/2il0gt5.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu li:hover ul {
left: auto;
display: block;
}

#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

5. Αποθηκεύουμε το πρότυπό μας
6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript
7. Βάλτε τον παρακάτω κωδικό:

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='#' title='#'>Home</a></li>

<li><a href='#' title='#'>Tab 1</a>
<ul class='children'>
<li><a href='#' title='#'>1</a></li>
<li><a href='#' title='#'>2</a></li>
<li><a href='#' title='#'>3</a></li>
</ul>
</li>

<li><a href='#' title='#'>Tab 2</a>
<ul class='children'>
<li><a href='#' title='#'>1</a></li>
<li><a href='#' title='#'>2</a></li>
<li><a href='#' title='#'>3</a></li>
<li><a href='#' title='#'>4</a></li>
</ul>
</li>


<li><a href='#' title='#'>About</a></li>

<li><a href='#' title='#'>Contact</a></li>


</ul>

</div>

Όπου το # βάζετε το link σας και από δίπλα βάζετε το όνομα του link.

Προσέξτε τον χρωματισμό  για να καταλάβετε καλύτερα!

8. Αποθήκευση κι είστε έτοιμοι!


http://www.bloggertipandtrick.net