Diseño definitivos de los botos, si luego veo que gusta mas otro lo cambio.

2 years ago · f6efa5c8a6
--- a/src/main/resources/img/Starbucks_Coffee_Logo.svg.png
+++ b/src/main/resources/img/Starbucks_Coffee_Logo.svg.png
--- a/src/main/resources/static/css/Estilos.css
+++ b/src/main/resources/static/css/Estilos.css
@ -1,46 +1,51 @@
 *{
    padding: 0px;
    margin: 0px;
    margin: 0;
    padding: 0;
 }
 header{
    background-color: blue;
    width: 100%;
    height: 200px;

 .encabezado{
    background-color: #008A93;
 }
 #navegacion{
    margin: auto;
    width: 500px;
    font-family: Arial,Helvetica,sans-serif;
    background-color: yellow;
 img{
    width: 30px;
    border-radius: 50%;
 }
 ul,ol{
 .encabezado nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px;
 }
 .encabezado nav ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
 }
 .nav li a{
    background-color: #000;
    color: #fff;
 a{
    text-decoration: none;
    padding: 20px 30px;
    font-size: 20px;
    color: white;
    padding: 12px 20px;
    display: block;
 }
 .nav li a:hover{
    background-color: rgba(67, 67, 67);
 a:hover{
    background: rgb(44,44,44);
 }
 .nav > li{
    float: left;
 .encabezado nav ul li ul{
    display: flex;
    flex-direction: column;
 }
 .nav li ul{
    display:none;
 .encabezado nav ul li ul{
    position: absolute;
    min-width: 140px;
 }
 .nav li:hover > ul{
    display: block;
    background: #008A93;
 }
 .nav li ul li{
 .encabezado nav ul li ul li{
    width: 180px;
    position: relative;
 }
 .nav li ul li ul{
    right: -140px;
    top:0px
 .encabezado nav ul li ul{
    display: none;
 }
 .encabezado nav ul li:hover>ul{
    display: block;
 }
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@ -3,102 +3,41 @@
 <head>
    <meta charset="UTF-8">
    <title>Foro</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        #header{
            margin: auto;
            width: 500px;
            font-family: Arial,Helvetica,sans-serif;
        }
        ul,ol{
            list-style: none;
        }
        .nav li a{
            background-color: #000;
            color: #fff;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
        }
        .nav li a:hover{
            background-color: rgba(67, 67, 67);
        }
        .nav > li{
            float: left;
        }
        .nav li ul{
            display:none;
            position: absolute;
            min-width: 140px;
        }
        .nav li:hover > ul{
            display: block;
        }
        .nav li ul li{
            position: relative;
        }
        .nav li ul li ul{
            right: -140px;
            top:0px
        }
    </style>
    <link rel="stylesheet" th:href="@{/css/Estilos.css}">
 </head>
 <body>

    <div id="header">

        <ul class="nav">
            <li><a href="">Inicio</a></li>

            <li><a href="">Servicio</a>
                <ul>
                    <li><a href="">Submenu 1</a></li>
                    <li><a href="">Submenu 2</a></li>
                    <li><a href="">Submenu 3</a></li>
                    <li><a href="">Submenu 4</a>
                        <ul>
                            <li><a href="">Submenu 1</a></li>
                            <li><a href="">Submenu 2</a></li>
                            <li><a href="">Submenu 3</a></li>
                            <li><a href="">Submenu 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>

            <li><a href="">Acerca de</a>
                <ul>
                    <li><a href="">Submenu 1</a></li>
                    <li><a href="">Submenu 2</a></li>
                    <li><a href="">Submenu 3</a></li>
                    <li><a href="">Submenu 4</a></li>
                </ul>
            </li>


            <li><a href="">Contacto</a>
                <ul>
                    <li><a href="">Submenu 1</a></li>
                    <li><a href="">Submenu 2</a></li>
                    <li><a href="">Submenu 3</a></li>
                    <li><a href="">Submenu 4</a></li>
                </ul>
            </li>


        </ul>




    </div>





    <header class="encabezado">
        <nav>
            <div><img th:href="@{../img/Starbucks_Coffee_Logo.svg.png}">  </div>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Servicio</a></li>
                <li>
                    <a href="#">Nosotros</a>
                    <ul>
                        <li><a href="#">SubItem</a></li>
                        <li><a href="#">SubItem</a></li>
                        <li><a href="#">SubItem</a></li>
                    </ul>
                </li>
                <li><a href="#">Acerca de</a>
                    <ul>
                        <li><a href="#">SubItem</a></li>
                        <li><a href="#">SubItem</a></li>
                        <li><a href="#">SubItem</a></li>
                    </ul>
                </li>
                <li><a href="#">Contacto</a>
                    <ul>
                        <li><a href="#">SubItem</a></li>
                        <li><a href="#">SubItem</a></li>
                        <li><a href="#">SubItem</a></li>
                    </ul>

                </li>
            </ul>
        </nav>

    </header>
 </body>
 </html>