MEGA MENU No 1

MEGA MENU No 1
MEGA MENU
Το παρακάτω Mega menu είναι πολύ απλό και τοποθετήται σαν gadget. Εχει την δυνατότητα να εμφανίζει σε μία καρτέλα του υπομενού του από 1 εώς 5 στήλες συνδέσμων. Μπορείτε να αλλάξετε το πλάτος και το ύψος της οριζόντιας μπάρας αλλάζοντας το width:1450px; και το height:35px; στην 10η και 12η γραμμή του κώδικα. Το μέγεθος της γραμματοσειράς το αλλάζετε στην 3η γραμμή του κώδικα εκεί που γράφει font-size:14px; Την οικογένεια της γραμματοσειράς την αλλάζετε στην 4η γραμμή εκεί που γράφει font-family:Arial;
Εννοείται ότι το ίδιο κάνετε και για τα μενού που ανοίγουν· αλλάζετε ότι είναι μεγάλο ή μικρό για τις διαστάσεις του ιστολογίου σας. Οι ίδιες παράμετροι επαναλαμβάνονται 2 ή 3 φορές μέσα στον κώδικα. Αλλάξτε όποιες νομίζετε ότι δεν ταιριάζουν στο μέγεθος του blog σας. 


<style type="text/css">
body, ul, li {
 font-size:14px;
 font-family:Arial;
 line-height:20px;
 text-align:left;}

/* Navigation Bar */
#menu {
 list-style:none;
 width:1450px;
 margin:0px 0px 0px 0px;
 height:35px;
 padding:0px 4px 0px 4px;

 /* Rounded Corners */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color */
background: #10500A;

 /* Borders */
 border: 1px solid #11CC20;}
#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 4px 4px 4px;
 margin-right:4px;
 margin-top:4px;
 border:none;}
#menu li:hover {
 border: 1px solid #11CC20;
 padding: 4px 4px 4px 4px;

 /* Background color */
background: #FFFF00;

 /* Rounded corners */
 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;}
#menu li a {
 font-family:Arial;
 font-size:14px;
 color: #FFFFFF;
 display:block;
 outline:0;
 text-decoration:none;}
#menu li:hover a {
 color:#760991;}
#menu li .drop {
padding-right:2px;
background: none; right 2px;}
#menu li:hover .drop {
 background:none; right 2px;}

/* Drop Down */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em;

/* Hides the drop down */
 text-align:left;
 padding:4px 4px 4px 4px;
 border:1px solid #11CC20;
 border-top:none;

 /* Gradient background */
background:#979707;

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;}
.dropdown_1column {width: 220px;}
.dropdown_2columns {width: 440px;}
.dropdown_3columns {width: 660px;}
.dropdown_4columns {width: 880px;}
.dropdown_5columns {width: 1100px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px ;
z-index: 10000 !important;
top:auto;}

/* Columns */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 4px;
 margin-right: 4px;}
.col_1 {width:210px;}
.col_2 {width:430px;}
.col_3 {width:640px;}
.col_4 {width:850px;}
.col_5 {width:1060px;}

/* Right alignment */
#menu .menu_left {
 float:left !important;
 margin-left:0px;}
#menu li .align_left {

/* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;}
#menu li:hover .align_left {
 left:auto;
 left:-1px;
 top:auto;}

/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial;
 line-height:20px;
 font-size:12px;
 text-align:left; }
#menu h2 {
 font-size:14px;
 font-weight:400;
 letter-spacing:-1px;
 margin:5px 0 5px 0;
 padding-bottom:1px;
 border-bottom:0px;}
#menu h3 {
 font-size:14px;
 margin:5px 0 5px 0;
 padding-bottom:1px;
 border-bottom:0px;}
#menu p {
 line-height:20px;
 margin:0 0 5px 0;}
#menu li:hover div a {
 font-size:12px;
 color:#FFFFFF;}
#menu li:hover div a:hover {
 color:#FFFF00;}
.strong {font-weight:bold;}
.italic {font-style:italic;}

 /* Rounded Corners */
#menu li .black_box {
background-color:none;
color: #FFFFFF;
padding:4px 6px 4px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 border-radius: 5px;}
#menu li ul {
 list-style:none;
 padding:0;
 margin:1px 1px 1px 1px;}
#menu li ul li {
 font-size:12px;
 line-height:20px;
 position:relative;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:200px;}
#menu li ul li:hover {
 background: #760991;
 border:none;
 padding:0;
 margin:0;}
#menu li .greybox li {
 background:#0F4094;
 margin:2px 2px 2px 2px;
 padding:2px 2px 2px 2px;
 width:200px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;}
#menu li .greybox li:hover {
 background:#760991;
 margin:2px 2px 2px 2px;
 padding:2px 2px 2px 2px;}
.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important;}
</style>

<!-- Begin Home item -->
<div id="menu">
<li><a href="http://the-best-widgets.blogspot.gr" class="drop">HOME</a></li>
<!-- End Home item -->
<!—Begin 2 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">MY PAGES</a>
<div class="dropdown_2columns align_left">
<div class="col_2">
<h2>MY PAGES</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/my-posts.html">ALL MY POSTS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/blog-page_11.html">MY LINKS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/wigdets.html">MY VIDEOS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/widgets_859.html">MY PHOTOS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/widgets_26.html">MY FILES</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/blog-page.html">MY MUSIC</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/my-forum.html">MY FORUM</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/widgets_3619.html">MY RSS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/wigdets_31.html">MY NEWS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/widgets_9083.html">RADIO+TV</a></li></ul></div>
</li>
<!-- End 2 columns Item -->
<!-- Begin 5 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">ΟΡΙΖΟΝΤΙΑ & ΚΑΘΕΤΑ MENU</a>
<div class="dropdown_5columns align_left">
<div class="col_5">
<h2>ΟΡΙΖΟΝΤΙΑ & ΚΑΘΕΤΑ MENU</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
</li>
<!-- End 5 columns Item -->
<!-- Begin 4 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">SLIDESHOWS</a>
<div class="dropdown_4columns align_left">
<div class="col_4">
<h2>SLIDESHOWS</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SLIDESHOW-1</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-2</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-3</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-4</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-5</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-6</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SLIDESHOW-7</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-8</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-9</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-10</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-11</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-12</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SLIDESHOW-13</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-14</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-15</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-16</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-17</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-18</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SLIDESHOW-19</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-20</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-21</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-22</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-23</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-24</a></li></ul></div>
</li>
<!-- End 4 columns Item -->
<!-- Begin 3 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">FACEBOOK WIDGETS</a>
<div class="dropdown_3columns align_left">
<div class="col_3">
<h2>FACEBOOK WIDGETS</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">FACEBOOK WIDGET-1</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-2</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-3</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-4</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">FACEBOOK WIDGET-6</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-7</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-8</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-9</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-10</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">FACEBOOK WIDGET-11</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-12</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-13</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-14</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-15</a></li></ul></div>
</li>
<!-- End 3 columns Item -->
<!-- Begin 1 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">SOSIAL BUTTONS</a>
<div class="dropdown_1column align_left">
<div class="col_1">
<h2>SOSIAL BUTTONS</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SOSIAL BUTTONS-1</a></li>
<li><a class='linknudge' href="#">SOSIAL BUTTONS-2</a></li>
<li><a class='linknudge' href="#">SOSIAL BUTTONS-3</a></li>
<li><a class='linknudge' href="#">SOSIAL BUTTONS-4</a></li>
<li><a class='linknudge' href="#">SOSIAL BUTTONS-5</a></li></ul></div>
</li>
<!-- End 1 columns Item -->
<!-- Begin 1 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">EMBED FILES</a>
<div class="dropdown_1column align_left">
<div class="col_1">
<h2>EMBED FILES</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">EMBED FILES-1</a></li>
<li><a class='linknudge' href="#">EMBED FILES-2</a></li>
<li><a class='linknudge' href="#">EMBED FILES-3</a></li>
<li><a class='linknudge' href="#">EMBED FILES-4</a></li>
<li><a class='linknudge' href="#">EMBED FILES-5</a></li></ul></div>
</li>
<!-- End 1 columns Item -->
<!-- Begin 1 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">SCROLLING TEXTS</a>
<div class="dropdown_1column align_left">
<div class="col_1">
<h2>SCROLLING TEXTS</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#"> SCROLLING TEXTS-1</a></li>
<li><a class='linknudge' href="#">SCROLLING TEXTS-2</a></li>
<li><a class='linknudge' href="#">SCROLLING TEXTS-3</a></li>
<li><a class='linknudge' href="#">SCROLLING TEXTS-4</a></li>
<li><a class='linknudge' href="#">SCROLLING TEXTS-5</a></li></ul></div>
</li>
<!-- End 1 columns Item -->
</div>