Menu CSS

Hoy vamos a mostraros un menú Css para incluir en nuestro blog.

Para ello usamos primero el Código CSS que vemos a continuación .en 

Nos dirigimos a nuestra plantilla y en Tema > Personalizar 

Añadir CSS pegamos el siguiente código.

• CREATIVO 
 
• ESTUDIO
 
• PRENSA 
 
• BLOG
 
• CONTACTO 

CSS

 #cssmenu { width:auto; display:block; text-align:center; font-family:Oswald; line-height:1.2; } #cssmenu ul { width:auto; display:block; font-size:0; text-align:center; color:#EEEEEE; background-color: #333333; border: transparent; margin:0; padding:0; list-style:none; position:relative; z-index:999999990; border-radius: 3px; } #cssmenu li { display:inline-block; position:relative; font-size:0; margin:0; padding:0; } /*Top level items ---------------------------------------*/ #cssmenu >ul>li>span, #cssmenu >ul>li>a { font-size:22px; color:inherit; text-decoration:none; padding:14px 20px; font-weight:400; text-transform:uppercase; letter-spacing:2px; display:block; position:relative; transition:all 0.3s; } #cssmenu li:hover > span, #cssmenu li:hover > a { color:#333333; background-color:#F3F3F3; } /*Sub level items ---------------------------------------*/ #cssmenu .dropdown { text-align:left; left:0; font-family:Helvetica, Arial, sans-serif; color: #333333; background-color:#F3F3F3; border:none; position:absolute; box-shadow: 0 4px 8px rgba(0,0,0,0.3); display:none; opacity:0; cursor:default; } #cssmenu .dropdown li { display: block; } #cssmenu .dropdown li > span, #cssmenu .dropdown li > a, #cssmenu .clm a, #cssmenu .clm h3 { font-size:14px; font-weight:400; font-family:inherit; margin:0; padding:8px 20px; display:block; color:inherit; text-decoration:none; } #cssmenu .clm h3 { font-size:20px; font-weight:700; } #cssmenu .sub-item { background-color:#F3F3F3; position:relative; transition:all 0.3s; } #cssmenu .dropdown li:hover > span, #cssmenu .dropdown li:hover > a { color:#333333; background-color:#DDDDDD; } #cssmenu .clm a:hover { color:#333333; transition:color 0.2s; } #cssmenu .dropdown.right0 {left:auto;right:0;} #cssmenu .dropdown li > .dropdown.right0 {left:auto;right:100%;} #cssmenu li.full-width{ position:static; } #cssmenu li.full-width .dropdown{ width:100%; left:0; box-sizing:border-box; } #cssmenu li:hover > .dropdown { display:block; opacity:1; z-index:1; } #cssmenu .dropdown li > .dropdown { left:100%; right:auto; top:0; } #cssmenu ul.dropdown { min-width:240px; /* Sub level menu min width */ } #cssmenu div.dropdown { text-align:center; } /* each column */ #cssmenu .clm { text-align:left; margin:20px; vertical-align:top;/*or middle*/ width:auto; min-width:240px; display:inline-block; *display:inline;*zoom:1; } #cssmenu .clm a:hover { color:#333333; text-decoration:underline; } /*-----------Arrows----------------*/ #cssmenu .arrow { color:inherit; border-style:solid; border-width:2px 2px 0 0; padding:4px; transform:rotate(135deg);margin-top:-8.5px;margin-left:4px; position:relative; display: inline-block; width: 0; height: 0; vertical-align:middle; overflow:hidden;/*for IE6*/ } #cssmenu .dropdown .arrow { transform:rotate(45deg); top:50%;margin-top:-6px; position:absolute;left:auto;right:20px; } @keyframes topItemAnimation { from {opacity: 0; transform:translate3d(0, -60px, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} } #cssmenu li a {animation:none;} #cssmenu.active li a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.08333333333333333s backwards;} #cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.5s backwards;} #cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.4166666666666667s backwards;} #cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.3333333333333333s backwards;} #cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.25s backwards;} #cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.16666666666666666s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}

Guardamos nuestra plantilla

Ahora en Diseño > Añadir un gadget Html/JavaScrip pegamos el siguiente código.

ver código 

.<div id="cssmenu">
    <ul>
        <li>
            <span>Creative <i class="arrow"></i></span>
            <ul class="dropdown">
                <li><a href="#">Curabitur</a></li>
                <li>
                    <span>Suspendisse vel <i class="arrow"></i></span>
                    <ul class="dropdown">
                        <li><a href="#">Etiam vestibulum</a></li>
                        <li><a href="#">Integer efficitur</a></li>
                        <li><a href="#">Finibus nibh</a></li>
                    </ul>
                </li>
                <li>
                    <span>
                        Eget
                        <img src="/mcmenu/img1.jpg" style="margin:10px;width:80px;vertical-align:middle;" />
                        <i class="arrow"></i>
                    </span>
                    <ul class="dropdown">
                        <li><a href="#">Nam elementum</a></li>
                        <li><a href="#">Magna pharetra</a></li>
                        <li><a href="#">Pulvinar mi eget</a></li>
                        <li><a href="#">Tincidunt orci</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Studio</a></li>
        <li class="full-width">
            <span>Press <i class="arrow"></i></span>
            <div class="dropdown">
                <div class="clm">
                    <h3>Integer</h3>
                    <a href="#">Lacus iaculis</a>
                    <a href="#">Eu tortor</a>
                    <a href="#">Luctus varius</a>
                </div>
                <div class="clm">
                    <h3>Efficitur Viverra</h3>
                    <a href="#">Praesent</a>
                    <h3>At Eros</h3>
                    <a href="#">Pellentesque </a>
                    <a href="#">Dignissim pulvinar</a>
                </div>
                <div class="clm">
                    <a href="#"><img src="/mcmenu/img2.jpg" style="width:280px;" /></a>
                </div>
            </div>
        </li>
        <li><a href="#">Blog</a></li>
        <li>
            <span>Contact <i class="arrow"></i></span>
            <ul class="dropdown right0">
                <li><a href="#">Nam elementum</a></li>
                <li><a href="#">Magna pharetra</a></li>
                <li><a href="#">Pulvinar mi eget</a></li>
                <li><a href="#">Tincidunt orci</a></li>
                <li>
                    <span>
                        Eget
                        <img src="/mcmenu/img1.jpg" style="margin:10px;width:80px;vertical-align:middle;" />
                        <i class="arrow"></i>
                    </span>
                    <ul class="dropdown right0">
                        <li><a href="#">Nam elementum</a></li>
                        <li><a href="#">Magna pharetra</a></li>
                        <li><a href="#">Pulvinar mi eget</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Cambiamos la almohadilla # segun corresponda