I want to make a bar with my logo and with my submenu

Navigation
1

As I mentioned in my title, I wanted to make a bar. I do not explain well what I want, but I'll leave the link to a restaurant that has what I want to do: link

Here's my code

Css: 

.menu ul li{
    background-color:#4d79ff;             /* muda a cor da barra */
    float: left;                   /* ficar horizontal */
    width: 120px;                  /* tamanho da barra */
    height: 50px;                  /* altura da barra */
    display: inline-block;
    text-align:center;             /* ficar a esqueda*/
    line-height: 22px;             /* mover o submenu*/
    font-size: 24px;               /* tamanho da letra*/
    position: relative;
}

.menu ul li:hover{
    background-color:#33adff;       /* muda a cor do submenu quando  metes la o rato */
}

.menu ul{
    padding: 0px;                   /* move a barra para a direita */
}

.menu ul ul{
    display: none;                  /* para  o sub sub menu ficar invisivel*/
}

.menu ul li:hover > ul{             /* para quando por o rato no menu ementa, aparecer o sub menu*/
    display:block;
}

.menu ul ul ul{                     /* SOBRE AS CARNES E PEIXES*/
    margin-left:120px;              /* mover para a direita*/
    top: 0px;                       /* ir para baixo*/
    position: absolute;
}

.menu ul ul li:hover{               /* SUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor do  submenu*/
}

.menu ul ul ul li:hover{            /* SUBSUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor*/
}

.menu a{                            /* OS MENUS*/
    color:black;                    /* cor do texto*/
    text-decoration: none;          /* sem decoração*/
}

Html: 

<img src="33.png" href="quinta.html" width="150" height="150">
<body>
        <nav class="menu">
            <ul>
                <li><a href="Restaurante.html">Restaurante</a></li>
                <li><a href="#">Ementa</a>
                    <ul>
                        <li><a href="Entrada.html">Entrada</a></li>
                        <li><a href="Prato Principal.html">Prato Principal</a>
                            <ul>
                                <li><a href="Carnes.html">Carnes</a></li>
                                <li><a href="Peixes.html">Peixes</a></li>
                                <li><a href="Vegetariano.html">Vegetariano</a></li>
                            </ul>
                        </li>
                        <li><a href="Sobremesas.html">Sobremesas</a></li>
                    </ul>
                </li>
                <li><a href="Reserva.html">Reserva</a></li>
                <li><a href="Contacto.html">Contacto</a></li>
            </ul><br><br><br><br>
    </nav>
    
asked by anonymous 07.01.2018 / 00:00

3 answers

0

Lucas from what I read in your question and in the comments I think you want the menu with Blur and aligned in the center of the correct page.

I used the CSS that Thomas created to make Blur and I added this CSS to align the Menu and Image in the center of the page: 

/* Alinhamento horizontal do Menu no Centro da Página*/
nav {
    width: 480px;
    margin: 0 auto;
}
/* Alinhamento horizontal da Imagem no Centro da Página*/
.hero {
    text-align: center;
}

See below for the full Snippet running. Click Run . 

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.menu ul li{
    background-color:#4d79ff;             /* muda a cor da barra */
    float: left;                   /* ficar horizontal */
    width: 120px;                  /* tamanho da barra */
    height: 50px;                  /* altura da barra */
    display: inline-block;
    text-align:center;             /* ficar a esqueda*/
    line-height: 22px;             /* mover o submenu*/
    font-size: 24px;               /* tamanho da letra*/
    position: relative;
}

.menu ul li:hover{
    background-color:#33adff;       /* muda a cor do submenu quando  metes la o rato */
}

.menu ul{
    padding: 0px;                   /* move a barra para a direita */
}

.menu ul ul{
    display: none;                  /* para  o sub sub menu ficar invisivel*/
}

.menu ul li:hover > ul{             /* para quando por o rato no menu ementa, aparecer o sub menu*/
    display:block;
}

.menu ul ul ul{                     /* SOBRE AS CARNES E PEIXES*/
    margin-left:120px;              /* mover para a direita*/
    top: 0px;                       /* ir para baixo*/
    position: absolute;
}

.menu ul ul li:hover{               /* SUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor do  submenu*/
}

.menu ul ul ul li:hover{            /* SUBSUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor*/
}

/* Css Blur do Thomas*/
.menu a{                            /* OS MENUS*/
    color:black;                    /* cor do texto*/
    text-decoration: none;          /* sem decoração*/
}
.menu li {
    -webkit-filter: blur(0);
    -webkit-transition: -webkit-filter 0.5s ease-in-out;
}
.menu:hover li {
    -webkit-filter: blur(1.5px);
}
.menu:hover li:hover, .menu:hover li:hover ul li{
    -webkit-filter: blur(0);
}
/* Alinhamento horizontal do Menu no Centro da Página*/
nav {
    width: 480px;
    margin: 0 auto;
}
/* Alinhamento horizontal da Imagem no Centro da Página*/
.hero {
    text-align: center;
}
<div class="hero">
    <img src="33.png" href="quinta.html" width="150" height="150">
</div>
<nav class="menu">
    <ul>
        <div>
        <li><a href="Restaurante.html">Restaurante</a></li>
        <li><a href="#">Ementa</a>
            <ul>
                <li><a href="Entrada.html">Entrada</a></li>
                <li><a href="Prato Principal.html">Prato Principal</a>
                    <ul>
                        <li><a href="Carnes.html">Carnes</a></li>
                        <li><a href="Peixes.html">Peixes</a></li>
                        <li><a href="Vegetariano.html">Vegetariano</a></li>
                    </ul>
                </li>
                <li><a href="Sobremesas.html">Sobremesas</a></li>
            </ul>
        </li>
        <li><a href="Reserva.html">Reserva</a></li>
        <li><a href="Contacto.html">Contacto</a></li>
    </div>
    </ul>
    <br><br><br><br>
</nav>

I had an Error in your HTML Image I was out of <body> , I also corrected this in the HTML above 

<!-- Não se deve colocar a imagem fora Body -->
<img src="33.png" href="quinta.html" width="150" height="150">
<body>
    
08.01.2018 / 13:40
0

Lucas, for you to have this result, you need to work with filter and add blur , which gives the blur effect.

Add this line in your css. 

.menu li {
    -webkit-filter: blur(0);
    -webkit-transition: -webkit-filter 0.5s ease-in-out;
}
.menu:hover li {
    -webkit-filter: blur(1.5px);
}
.menu:hover li:hover, .menu:hover li:hover ul li{
    -webkit-filter: blur(0);
}
    
07.01.2018 / 00:58
0

Good morning!

Place your img tag inside the body tag, I do not know if it's generating any of your problems, but it can lead to problems going forward. As for blur, I do not think it's probably done with a script, as there's no active class in the links either. I did so in the code you sent and it worked here: 

$('.menu li').hover(function(){
  $('.menu li').css('filter', 'blur(3px)');
  $(this).css('filter', 'none');
})

I hope to have helped, hugs!

    
08.01.2018 / 12:52
FireBird and MySQL I have a problem in a section