HORIZONTAL MENU-6
.
.
.
.
.
<style>
ul#css3menu1,ul#css3menu1 ul{margin:0;list-style:none;padding:0;background:#333;color:#FFF;font:13px Arial;border:1px; solid #FBBB22; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
ul#css3menu1 ul{display:none;position:absolute;left:0;top:100%;background:#333;color:#FFF;font:13px Arial;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-color:#FBBB22;
padding:5px;}
ul#css3menu1 li:hover>*{display:block;}
ul#css3menu1 li{position:relative;display:block;white-space:nowrap;background:#333;color:#FFF;font:13px Arial;float:left;}
ul#css3menu1 li:hover{z-index:1;}
ul#css3menu1 ul ul{position:absolute;left:100%;top:0;}
ul#css3menu1{background:#333;color:#FFF;font:13px Arial;z-index:999;position:relative;display:inline-block; zoom:1;padding:0;*display:inline;}
* html ul#css3menu1 li a{display:inline-block;}
ul#css3menu1>li{margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{outline-style:none;}
ul#css3menu1 a{display:block;vertical-align:middle;text-align:left;text-decoration:none;cursor:pointer;padding:5px;background:#333;color:#FFF;font:13px Arial;}
ul#css3menu1 ul li{float:none;margin:5px;}
ul#css3menu1 ul a{text-align:left;padding:5px;background:#740777;color:#FFF;font:13px Arial;border-width:0;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{background:#740777;color:#FFF;font:13px Arial;border-color:#FBBB22;border-style:solid;}
ul#css3menu1 span{display:block;overflow:visible;}
ul#css3menu1 ul span{background-image:none;}
ul#css3menu1 > li.switch{display:none;cursor:pointer;width:40px;height:20px;padding:5px;}
ul#css3menu1 > li.switch:before {content:"";position:absolute;display:block;height:4px;width:40px;background:#333; color:#FFF;font:13px Arial;border-width:0;border-radius:5px;}
ul#css3menu1 > li.switch:hover:before{background:#333333;}
.c3m-switch-input{display:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed {background:#207907;color:#FFF;font:13px Arial; border-width:0;border-style:solid;border-color:#FBBB22;text-decoration:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li > a.pressed{background-color:#207907;color:#FFFFFF;font:13px Arial;text-decoration:none;}
ul#css3menu1 li.topfirst>a{border-width:0;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:5px;}
ul#css3menu1 li.toplast>a{border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:5px;}
@media screen and (max-width: 1500px) {
ul#css3menu1 > li {position: initial;}
ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {left: 0;right:auto;top: 100%;}
ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 0; width: 100% !important;}}
@media screen and (max-width: 1498px) {
ul#css3menu1 {width: 100%;}
ul#css3menu1 > li {display: none;position: relative;width: 100% !important;}
ul#css3menu1 > li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li {display: block;}
ul#css3menu1 > li.switch > label {position:absolute;cursor:pointer;top:0;left:0;right: 0;bottom:0;}}
</style>
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="http://the-best-widgets.blogspot.gr" style="height:18px;line-height:18px;">HOME</a></li>
<li class="topmenu"><a href="http://the-best-widgets.blogspot.gr/p/my-posts.html" style="height:18px;line-height:18px;"><span>MY POSTS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#"><span>BEST POSTS ►</span></a>
<ul>
<li><a href="#">MY BEST POSTS</a></li>
</ul></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY LINKS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#"><span>BEST LINKS ►</span></a>
<ul>
<li><a href="#">MY BEST LINKS</a></li>
</ul></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY FILES ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#"><span>BEST FILES ►</span></a>
<ul>
<li><a href="#">MY BEST FILES</a></li>
</ul></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY PHOTOS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY VIDEOS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY PRESENTATIONS ▼</span></a>
<ul>
<li><a href="#">PRESENTATION-1</a></li>
<li><a href="#">PRESENTATION-2</a></li>
<li><a href="#">PRESENTATION-3</a></li>
<li><a href="#">PRESENTATION-4</a></li>
<li><a href="#">PRESENTATION-5</a></li>
<li><a href="#">PRESENTATION-6 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY E-BOOKS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY MUSIC ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY E-MAGAZINES ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
<li><a href="#">LINK-6</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY PRODUCTS ▼</span></a>
<ul>
<li><a href="#">PRODUCT-1</a></li>
<li><a href="#">PRODUCT-2</a></li>
<li><a href="#">PRODUCT-3</a></li>
<li><a href="#">PRODUCT-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY FORUM ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="toplast"><a href="#" style="height:18px;line-height:18px;">RSS</a></li>
</ul>
