Mostrar submenu ao passar mouse sobre botão

programador_09 · Outubro 20, 2015

Eu tenho um botão e gostaria que ao passar o mouse sobre ele, exibisse abaixo tipo um "menu" com outros botoes um abaixo do outro, como faço isso com css?

FelipeMussolini · Novembro 12, 2015

Menu.html

<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
<div id="imMnMn" class="auto">
				<ul class="auto">
					<li id="imMnMnNode0" class="imMnMnFirst imMnMnCurrent">
						<a  id="ancora" href="home">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg" id="imBreadcrumb"></span>HOME</span>
							</span>
						</a>
					</li><li id="imMnMnNode3" class="imMnMnMiddle">
						<a href="grupo">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span>GRUPO</span>
							</span>
						</a>
					</li><li id="imMnMnNode9" class="imMnMnMiddle">
						<a href="servicos">
                        <span class="imMnMnFirstBg">
							<span class="imMnMnTxt"><span class="imMnMnImg"></span>SERVIÇOS<span class="imMnMnLevelImg"></span></span>
						</span></a>
						<ul class="auto">
							<li id="imMnMnNode10">
								<a class="link" href="javascript:full('sac')">
									<span class="imMnMnFirstBg">
							<span class="imMnMnTxt">
                            <span class="imMnMnImg"></span>REQUISIÇÕES<span class="imMnMnLevelImg"></span></span>
							</span>
								</a>
							</li>
						</ul>
					</li><li id="imMnMnNode5" class="imMnMnMiddle">
						<a href="javascript:abrir('contatos.html');">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span>CONTATOS</span>
							</span>
						</a>
					</li><li id="imMnMnNode7" class="imMnMnLast">
						<a href="downloads">
							<span class="imMnMnFirstBg">
								<span class="imMnMnTxt"><span class="imMnMnImg"></span>DOWNLOADS</span>
							</span>
						</a>
					</li>
				</ul>
			</div></div>

menu.css

/* ######################### MENU STYLE #########################*/
#imSite { position: relative; }
#imMnMn { text-align: left; }
#imMnMn > ul { z-index: 10001; display: inline-block; }
#imMnMn li > ul { z-index: 10002; }

/* Main Menu */

#imMnMn ul, #imPgMn ul {padding:0;margin:0;list-style-type:none; }
#imMnMn > ul > li { position: relative; margin-left: 0px;  }
#imMnMn > ul > li:first-child {
	margin-left: 0;
	font-size: 14%;
}
/* Links */

/* Main Menu style */
#imMnMn > ul > li { cursor: pointer; display: block; float: left; }
#imMnMn > ul > li > a { display: block; }
#imMnMn > ul > li .imMnMnFirstBg { background-image: url('../menu/main.png'); width: 220px; height: 47px; }
#imMnMn > ul > li:hover .imMnMnFirstBg , #imMnMn > ul > li.imMnMnCurrent:hover .imMnMnFirstBg  { background-image: url('../menu/main_h.png'); }
#imMnMn > ul > li.imMnMnSeparator .imMnMnFirstBg  { background-image: none; cursor: auto; }
#imMnMn > ul > li.imMnMnCurrent .imMnMnFirstBg  { background-image: url('../menu/main_c.png'); cursor: auto; }
#imMnMn > ul > li.imMnMnFirst .imMnMnFirstBg   { background-image: url('../menu/main_f.png'); }
#imMnMn > ul > li.imMnMnFirst:hover .imMnMnFirstBg , #imMnMn > ul > li.imMnMnFirst.imMnMnCurrent:hover .imMnMnFirstBg  { background-image: url('../menu/main_f_h.png'); }
#imMnMn > ul > li.imMnMnFirst.imMnMnSeparator:hover .imMnMnFirstBg  {  background-image: none; cursor: auto; }
#imMnMn > ul > li.imMnMnFirst.imMnMnCurrent .imMnMnFirstBg  { background-image: url('../menu/main_f_c.png'); cursor: auto; }
#imMnMn > ul > li.imMnMnMiddle .imMnMnFirstBg  { background-image: url('../menu/main_m.png'); }
#imMnMn > ul > li.imMnMnMiddle:hover .imMnMnFirstBg , #imMnMn > ul > li.imMnMnMiddle.imMnMnCurrent:hover .imMnMnFirstBg  { background-image: url('../menu/main_m_h.png'); }
#imMnMn > ul > li.imMnMnMiddle.imMnMnSeparator:hover .imMnMnFirstBg  {  background-image: none; cursor: auto; }
#imMnMn > ul > li.imMnMnMiddle.imMnMnCurrent .imMnMnFirstBg  { background-image: url('../menu/main_m_c.png'); cursor: auto; }
#imMnMn > ul > li.imMnMnLast .imMnMnFirstBg  { background-image: url('../menu/main_l.png'); }
#imMnMn > ul > li.imMnMnLast:hover .imMnMnFirstBg , #imMnMn > ul > li.imMnMnLast.imMnMnCurrent:hover .imMnMnFirstBg  { background-image: url('../menu/main_l_h.png'); }
#imMnMn > ul > li.imMnMnLast.imMnMnSeparator:hover .imMnMnFirstBg  {  background-image: none; cursor: auto; }
#imMnMn > ul > li.imMnMnLast.imMnMnCurrent .imMnMnFirstBg  { background-image: url('../menu/main_l_c.png'); cursor: auto; }
#imMnMn > ul > li .imMnMnFirstBg .imMnMnImg, #imMnMn > ul > li:hover .imMnMnFirstBg .imMnMnImg {
	overflow: hidden;
	position: absolute;
	line-height: 47px;
	width: 100%;
	height: 47px;
	top: 0;
	text-align: left;
	font-size: 14pt;
}
#imMnMn > ul > li .imMnMnFirstBg .imMnMnImg img, #imMnMn > ul > li:hover .imMnMnFirstBg .imMnMnImg img { border: none; }
#imMnMn > ul > li .imMnMnFirstBg .imMnMnLevelImg {
	display: none;
	font-size: 14px;
}
#imMnMn > ul > li .imMnMnFirstBg .imMnMnHoverIcon { display: none; }
#imMnMn > ul > li:hover .imMnMnFirstBg .imMnMnDefaultIcon { display: none; }
#imMnMn > ul > li:hover .imMnMnFirstBg .imMnMnHoverIcon { display: inline; }
#imMnMn > ul > li.imMnMnSeparator > .imMnMnFirstBg > .imMnMnTxt { display: none; }
#imMnMn > ul > li > a { text-decoration: none; }
#imMnMn > ul > li .imMnMnFirstBg > .imMnMnTxt { overflow: hidden; margin: 0px; padding: 0px;  width: 220px; height: 47px; font: normal normal normal 14pt 'Arial Black'; color: #000000; text-align: center; text-decoration: none; line-height: 47px; display: block;}
#imMnMn > ul > li:hover .imMnMnFirstBg > .imMnMnTxt, #imMnMn > ul > li.imMnMnCurrent:hover .imMnMnFirstBg > .imMnMnTxt {
	cursor: pointer;
	color: #000;
	font-weight: normal;
	font-style: normal;
	font-size: 14pt;
}
#imMnMn > ul > li.imMnMnCurrent .imMnMnFirstBg > .imMnMnTxt { color: #000;font-weight: normal;font-style: normal;}
#imMnMn > ul > li.imMnMnSeparator { background: transparent url('../res/separatorh.png') no-repeat center center; width: 10px; height: 47px; }
#imMnMn .imMnMnFirstBg { position: relative; display: block; background-repeat: no-repeat; cursor: pointer; width: 100%; }
#imMnMn a { border: none; cursor: pointer; }
#imMnMn .imMnMnTxt { text-overflow: ellipsis; white-space: nowrap; }

/* SubMenu style */
#imMnMn li .imMnMnBorder {  background-repeat: no-repeat; background-position: left top; width: 160px; height: 21px; border-collapse: collapse; }
#imMnMn ul ul li { cursor: pointer; overflow: hidden; width: 160px; height: 21px; border-collapse: collapse; cursor: pointer; display: inline; }
#imMnMn ul ul li a { display: block; width: 160px; height: 21px; }
#imMnMn ul ul li > .imMnMnBorder, #imMnMn ul ul li > a > .imMnMnBorder { background-image: url('../menu/sub.png'); }
#imMnMn ul ul li:hover > a > .imMnMnBorder, #imMnMn ul ul li:hover > .imMnMnBorder { background-image: url('../menu/sub_h.png'); }
#imMnMn ul ul li.imMnMnSeparator:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnSeparator:hover > .imMnMnBorder { background-image: url('../menu/sub.png'); cursor: auto; }
#imMnMn ul ul li.imMnMnFirst > .imMnMnBorder, #imMnMn ul ul li.imMnMnFirst > a > .imMnMnBorder { background-image: url('../menu/sub_f.png'); }
#imMnMn ul ul li.imMnMnFirst:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnFirst:hover > .imMnMnBorder { background-image: url('../menu/sub_f_h.png'); }
#imMnMn ul ul li.imMnMnFirst.imMnMnSeparator:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnFirst.imMnMnSeparator:hover > .imMnMnBorder { background-image: url('../menu/sub_f.png'); cursor: auto; }
#imMnMn ul ul li.imMnMnMiddle > .imMnMnBorder, #imMnMn ul ul li.imMnMnMiddle > a > .imMnMnBorder { background-image: url('../menu/sub_m.png'); }
#imMnMn ul ul li.imMnMnMiddle:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnMiddle:hover > .imMnMnBorder { background-image: url('../menu/sub_m_h.png'); }
#imMnMn ul ul li.imMnMnMiddle.imMnMnSeparator:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnMiddle.imMnMnSeparator:hover > .imMnMnBorder { background-image: url('../menu/sub_m.png'); cursor: auto; }
#imMnMn ul ul li.imMnMnLast > .imMnMnBorder, #imMnMn ul ul li.imMnMnLast > a > .imMnMnBorder { background-image: url('../menu/sub_l.png'); }
#imMnMn ul ul li.imMnMnLast:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnLast:hover > .imMnMnBorder { background-image: url('../menu/sub_l_h.png'); }
#imMnMn ul ul li.imMnMnLast.imMnMnSeparator:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnLast.imMnMnSeparator:hover > .imMnMnBorder { background-image: url('../menu/sub_l.png'); cursor: auto; }
#imMnMn .imMnMnImg img { vertical-align: middle; padding: 0px; border: none; }
#imMnMn li .imMnMnBorder .imMnMnImg img.imMnMnHoverIcon { display: none; }
#imMnMn li:hover > a > .imMnMnBorder > .imMnMnTxt > .imMnMnImg img.imMnMnDefaultIcon { display: none; }
#imMnMn li:hover > a > .imMnMnBorder > .imMnMnTxt > .imMnMnImg img.imMnMnHoverIcon { display: inline; }
#imMnMn .imMnMnImg { display: block; height: 21px; line-height: 21px; float: left; cursor: pointer; }
#imMnMn .imMnMnImg img { position: relative; left: -3px;}
#imMnMn ul ul li .imMnMnTxt { position: relative; overflow: hidden; text-align: left; margin: 0px; padding: 0px; padding-left: 7px;  line-height: 21px; height: 21px; }
#imMnMn ul ul li .imMnMnLevelImg { z-index: 100; position: absolute; right: 3px; top: 0; display: block; width: 7px; height: 21px; background-image: url('../res/imIconMenuLeft.gif'); background-position: center center; background-repeat: no-repeat; }

/* Normal font style */
#imMnMn ul ul .imMnMnTxt { height: 21px; text-decoration: none; text-align: left; font: normal normal 9.000pt Arial; color: #FFFFFF;}

/* Hover font style */
#imMnMn ul ul li:hover > a > .imMnMnBorder .imMnMnTxt,
#imMnMn > ul > li > ul li:hover a,
#imMnMn ul ul li:hover > .imMnMnBorder .imMnMnTxt,
#imMnMn > ul > li > div > ul li:hover a { text-decoration: none; color: #FFFFFF; }
#imMnMn ul .imMnMnSeparator, #imMnMn ul .imMnMnSeparator * { cursor: default; }

/* Section font style */
#imMnMn ul ul li.imMnMnSeparator > a > .imMnMnBorder .imMnMnTxt,
#imMnMn > ul > li > ul li.imMnMnSeparator:hover a,
#imMnMn ul ul li.imMnMnSeparator:hover > .imMnMnBorder .imMnMnTxt,
#imMnMn ul ul li.imMnMnSeparator > .imMnMnBorder .imMnMnTxt { text-decoration: none; color: #808080; font-style: normal; font-weight: bold; }
#imMnMn ul a, #imMnMn ul a:hover, #imMnMn ul a:visited { font: inherit; color: inherit; text-align: inherit; text-decoration: none; }


/* MENU POSITION : HORIZONTAL VerticalOneColumn */
#imMnMn ul .autoHide, #imMnMn ul div .autoHide { display: none; }

/* ######################### MAIN MENU POSITION #########################*/

/* div: Menu container*/
#imMnMn { z-index:10000; }
#imMnMn > ul { position: relative; }
#imMnMn > ul > li > ul { position: absolute; }

/* First level menu style */
#imMnMn > ul > li { display: inline-block; width:220px; }
#imMnMn > ul > li span { display:block; padding:0;}
#imMnMn a { cursor: pointer; display: block; width:220px;}

/* ########################## SUB MENU POSITION #########################*/

#imMnMn.auto ul li ul li { top: 0px; }

/* Second level boxmodel*/
#imMnMn.auto ul li ul li ul { position: absolute; width: 160px;left: 100%; margin-top: -21px; }

/* Hide Levels */
#imMnMn.auto li:hover > ul.auto { display:block; }
#imMnMn.auto li ul.auto { display: none; }
#imMnMn ul ul li .imMnMnBorder { overflow: hidden; }

/* PAGE MENU  */

#imPgMn { text-align: left; position: relative; width: 140px; float: left; padding-left: 5px; padding-right: 5px; padding-top: 5px; border-right: 0px solid transparent; }
#imPgMn ul { margin-right: 10px; border-top: 0px solid #808080; border-bottom: 0px solid #808080; border-left: 0px solid #808080; border-right: 0px solid #808080; width: 140px; }
#imPgMn li { cursor: default; display: inline; float: left; position: relative; margin-bottom: 0px; background-color: #809FFF; width: 140px; border-bottom: 1px solid #A9A9A9; }
#imPgMn li a { display: table; width: 100%; }
#imPgMn li .imPgMnBorder { text-align: center; vertical-align: middle; display: table-row; width: 140px; }

/* Icon */
.imPgMnImg, .imPgMnCustomImg { height: 22px; line-height: 22px; font-size: 18px; display: table-cell; vertical-align: top; }
.imPgMnImg img, .imPgMnCustomImg img { margin-left: 2px; vertical-align: middle; }
#imPgMn .imPgMnImg { width: 0px; }
#imPgMn .imPgMnCustomImg { width: 0px; }
.imPgMnImg img.imPgMnDefaultIcon, .imPgMnCustomImg img.imPgMnDefaultIcon { display: inline; }
.imPgMnImg img.imPgMnHoverIcon, .imPgMnCustomImg img.imPgMnHoverIcon { display: none; }
.imPgMnSeparator img { display: inline; }
#imPgMn ul li:hover .imPgMnImg img.imPgMnDefaultIcon { display: none; }
#imPgMn ul li:hover .imPgMnImg img.imPgMnHoverIcon { display: inline }
#imPgMn ul li:hover .imPgMnImg, #imPgMn li.imPgMnCurrent .imPgMnImg { width: 0px; }

/* Normal font style */
#imContent #imPgMn .imPgMnTxt { display: table-cell; padding: 6px 3px; text-decoration: none; font: normal normal 9pt Tahoma; color: #FFFFFF; }

/* Current or hover font style */
#imContent #imPgMn li:hover, #imContent #imPgMn li.imPgMnCurrent { cursor: pointer; background-color: #6776FC; cursor: pointer; }
#imContent #imPgMn li:hover a, #imContent #imPgMn li:hover .imPgMnTxt,#imContent #imPgMn li.imPgMnCurrent a, #imContent #imPgMn li.imPgMnCurrent .imPgMnTxt { cursor: pointer; text-decoration: none; color: #FFFFFF;  font-style: inherit; font-weight: inherit; }
/* Separator */
#imPgMn li.imPgMnSeparator { display: table; }
#imPgMn li.imPgMnSeparator .imPgMnImg { width: 0px; }

/* Section font style */
#imContent #imPgMn li.imPgMnSeparator a, #imContent #imPgMn li.imPgMnSeparator .imPgMnTxt, #imContent #imPgMn li.imPgMnSeparator:hover a, #imContent #imPgMn li.imPgMnSeparator:hover .imPgMnTxt{ cursor: auto; background-color: transparent; text-decoration: none; color: #808080; font-style: normal; font-weight: bold; }
#imContent #imPgMn li:hover.imPgMnSeparator { cursor: default; background-color: #809FFF; }
#imContent #imPgMn li.imPgMnSeparator, #imContent #imPgMn li.imPgMnSeparator:hover { background-color: #0040FF; }
#imContent #imPgMn ul a, #imContent #imPgMn ul a:hover, #imContent #imPgMn ul a:visited { background: none; font: inherit; color: inherit; text-align: inherit; text-decoration: none; }
#imPgMn ul > li.imMnPageClear { margin: 0; padding: 0; line-height: 0px; font-size: 0px; border-collapse: collapse; display: block; position: static; float: none; background-color: transparent; clear: both; border: none; }
.link{font: normal normal normal 14pt 'Arial Black'; color: #0A2B8A; text-align: center; text-decoration: none;}
.backg
{
	background-image: url(../images/fundo.png);	
	background-position: left top;
	width:429px;
	height:215px;

}

/* End of file menu.css */

Espero ter ajudado!!! :D

Entrar

Arquivado

Mostrar submenu ao passar mouse sobre botão

Recommended Posts

programador_09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

FelipeMussolini 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante