I need a menu whose sub-menu appears above the menu

Question

I need a menu whose sub-menu appears above the menu

Asked 6 years, 1 month ago

Viewed 121 times

-1

Sorry for the lack of information: in the example of the code below, when you hover over the menu, the sub-menu Stop below the menu, do not know how to appear above the menu, who knows and want to help, I thank.

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="_css/infor.css">
    <meta charset="UTF-8"/>
    <title>MenuEx</title>
</head>
<body>

<style type="text/css">
/*Formatação*/
.menuhorizontal2{
margin: 0;
padding: 0;
width: auto;
height: 30px;
}
.menuhorizontal2 ul{ 
list-style: none;
}
.menuhorizontal2 li{ 
width: 80px;
padding:0px;
margin: 0;
position: relative;
display: inline;
float: left;
border-left: #999999 thin solid;
}
.menuhorizontal2 li ul{
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 35px;
left: 0;
}

                                /*nível inferior do menu com display: none*/
.menuhorizontal2 a{
display: block;
text-decoration: none;
padding: 7px;
background-color: #CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
} 

                                /* formatação da âncora e área clicável*/
.menuhorizontal2 li:hover ul, li.hover ul{
display: block;
}

.menuhorizontal2 li:hover ul, li.over ul{
display: block;
}


</style>

<ul class="menuhorizontal2">
<li><a href="#">Menu_1</a>
    <ul> 
        <li><a href="#">SubM_1</a></li>
        <li><a href="#">SubM_2</a></li>
        <li><a href="#">SubM_3</a></li>
    </ul> 
</li>
<li><a href="#">Menu_2</a>
    <ul>
        <li><a href="#">SubM_1</a></li>
        <li><a href="#">SubM_2</a></li>
        <li><a href="#">SubM_3</a></li>
    </ul>
</li>

</ul>
</body>

Could you elaborate more how you expect this menu to be and what you mean by going up? Do you want to make a navbar?

– Lucas Nascimento

2018/05/07 at 19:05
Please, clarify your specific problem or add other details to highlight exactly what you need. The way it’s written here, it’s hard to know exactly what you’re asking. See the [Ask] page for help clarifying this question. You can start by sharing what you’ve tried.

– Diego Rafael Souza

2018/05/07 at 19:08

2 answers

1

Muka dry an example that I did for you to give a studied, is a simple example, but easy to understand. I used display:flex to make you more responsive, but it’s very quiet to understand. I used position:fixed to preach it at the base of the page, and a top negative with transition to make him climb the :hover

Take the example and study the code. [] s I think can help you in the future...

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
}
.item {
    border: 1px solid black;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 2rem;
    position: relative;
    background-color: turquoise;
}
.sub {
    position: absolute;
    border: 1px solid black;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% + 2px);
    height: 2rem;
    top: 2rem;
    background-color: tomato;
    transition: top 300ms ease-in-out;
    z-index: -1;
}
.item:hover .sub{
    top: -2rem;
}

<div class="nav">
<div class="item">
    <a href="">item</a>
    <div class="sub">
        <a href="">sub</a>
    </div>
</div>
<div class="item">
    <a href="">item</a>
    <div class="sub">
        <a href="">sub</a>
    </div>
</div>
<div class="item">
    <a href="">item</a>
    <div class="sub">
        <a href="">sub</a>
    </div>
</div>
<div class="item">
    <a href="">item</a>
    <div class="sub">
        <a href="">sub</a>
    </div>
</div>
</div>

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.

by brnTwp • **448** points · Answer 1 · 2018-05-07T19:09:02+00:00

You should look for menu and submenu, so you find various ways to create, whether with pure css or with some jquery plugin (the most famous and easy is the bootstrap)

I have a code with menu and submenu that I have a while, I took from a place but I’ve forgotten what it is, but I always have it here with me. This is a pure menu:

/* Reset CSS */
*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
/* Fundo do menu */
.menu{
  background: #000;
}
/* Remove as bolinhas do lado das listas */
.menu .menu-list, .menu .sub-menu{
  list-style: none;
}
/* Configura todos os links do nosso menu */
.menu a{
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing:0.2em;
}
/* Faz os <li>s ficarem na horizontal */
.menu > .menu-list > li{
  float: left;
  position: relative;
}
/* Configura os links do menu principal */
.menu > .menu-list > li > a {
  padding: 20px;
  margin: 0 5px;
  background: #000;
}
/* Configura o fundo do menu principal quando com mouse hover */
.menu > .menu-list > li:hover a {
  background: #444;
}
/* Mostra o submenu no evento de mouse hover */
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
}
/* Configura o estilo do submenu */
.menu > .menu-list > li > .sub-menu {
  position: absolute;
  top: 50px;
  left: 5px;
  background: blue;
  min-width: 200px;
  z-index: 1000;
  display: none;
}
/* Configura os links do submenu */
.menu > .menu-list > li > .sub-menu > li > a {
	padding: 10px 20px;
}
/* Clearfix para o menu */
.menu:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

<div class="menu">
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Menu</a>
       <ul class="sub-menu">
        <li><a href="#">Sub Item1</a></li>
        <li><a href="#">Sub Item2</a></li>

      </ul>
    </li>
    <li><a href="#">Contato</a></li>
  </ul>
</div>

Now, the question of positioning in the bottom, I advise you the Bootstrap, even has a property of navbar of him who owns a class that already positions you fixed at the bottom of your page.