Actualmente, el submenú de mi sitio desaparece cuando salgo del elemento principal (consulte el menú de navegación en www.fitnessdelicious.com). Probé varias soluciones declaradas de otros hilos, pero nada parece funcionar hasta ahora. Tengo una idea de lo que estoy haciendo en cuanto a HTML y CSS, pero ahora, honestamente, no sé cómo proceder. ¿Por favor ayuda? Fragmento de CSS a continuación. ¡Gracias!

/* Navigation Menu
-------------------------------------------------------------- */
#mainnav-icon {
	display: none;
}
#navi-wrap {
	background: #fff;
}
#mainnav-menu {
	list-style-type: none;
	list-style-position: outside;
	text-align:left;
			border-top: 1px solid #eceece;
			border-bottom: 1px solid #e6e9bf;
			z-index:100;
			position:relative;
}
#mainnav-menu li{
	float:center;
	position:relative;
	margin-right: 1px;display:inline;
}
#mainnav-menu a {
	display: block;
	padding: .15em;
	font-family: 'Lato', sans-serif; 
	text-transform: uppercase;
	text-decoration: none;
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-ms-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}
#mainnav-menu a:link, #mainnav-menu a:visited {
	text-decoration: none;
	font-family: 'Lato', sans-serif; 
			font-size:14px;
			font-weight: 300;
			color:#d2da58;
			letter-spacing:2px;
			text-transform:uppercase;
			margin:0 13px;
			height:50px;
			line-height:50px;display:inline;
}
#mainnav-menu a:hover {
	background: #fff;
	color: #ff7a7f;
}

/* Drop-down Menu
-------------------------------------------------------------- */

#mainnav-menu ul {
	position: absolute;
	display: none;
	z-index: 99;
	left: -9999px;
	background: #fff;
	box-shadow: 0 0 2px #444;display:inline;
}
#mainnav-menu ul li{
	margin: 0;
	display: inline;
}
#mainnav-menu ul a {
	width: 250px;
	width: 16rem;
	padding: 1em;

	font-weight: normal;
	color: #333;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#mainnav-menu ul a:link, #mainnav-menu ul a:visited{
	color: #333;
	font-size: 0.9em;
	text-decoration: none;
}
#mainnav-menu ul a:hover {
	color: #fff;
	background: #e84747;
}
#mainnav-menu li ul ul {
	margin-left: 250px;
	margin-left: 16rem;
}
#mainnav-menu li:hover ul ul, #mainnav-menu li:hover ul ul ul, #mainnav-menu li:hover ul ul ul ul{
	display:none; left: 0;
}
#mainnav-menu li:hover ul, #mainnav-menu li li:hover ul, #mainnav-menu li li li:hover ul, #mainnav-menu li li li li:hover ul{
	display: block; left: 0;
}
#mainnav-menu li.current_page_item a, #mainnav-menu li.current-menu-item a {
	text-decoration: none; color: #ff7a7f;
}
#mainnav-menu li.current_page_item ul li a, #mainnav-menu li.current-menu-item ul li a{
	text-decoration: none; color: #ff7a7f;
}
#mainnav-menu ul li.current_page_item a, #mainnav-menu ul li.current-menu-item a {
	text-decoration: none; color: #ff7a7f;
}
#mainnav-menu ul li.current_page_item ul li a, #mainnav-menu ul li.current-menu-item ul li a{
	text-decoration: none; color: #ff7a7f;
}
	<div id="navi-wrap">
		<nav id="mainnav" class="container clearfix" role="navigation">
			<h4 id="mainnav-icon">Menu</h4>
			<ul id="mainnav-menu" class="menu"><li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item menu-item-25"><a href="http://www.fitnessdelicious.com/">Home</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://www.fitnessdelicious.com/recipes/">Recipes</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-41"><a href="http://www.fitnessdelicious.com/diet/">Diet deliciously</a>
<ul class="sub-menu">
	<li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://www.fitnessdelicious.com/the-method/">The Method</a></li>
	<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://www.fitnessdelicious.com/the-tools/">The Tools</a></li>
</ul>
</li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.fitnessdelicious.com/sample-page/">Boutique</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://www.fitnessdelicious.com/active-living/">Active Living</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.fitnessdelicious.com/aging/">Youthful Aging</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://www.fitnessdelicious.com/about/">About</a></li>
</ul>		</nav>
1
eats_cake 3 feb. 2015 a las 09:07

4 respuestas

La mejor respuesta
/* Navigation Menu
-------------------------------------------------------------- */
#mainnav-icon {
	display: none;
}
#navi-wrap {
	background: #fff;
}
#mainnav-menu {
	list-style-type: none;
	list-style-position: outside;
	text-align:left;
			border-top: 1px solid #eceece;
			border-bottom: 1px solid #e6e9bf;
			z-index:100;
			position:relative;
}
#mainnav-menu li{
	float:center;
	position:relative;
	margin-right: 1px;display:inline;
}
#mainnav-menu a {
	display: block;
	padding: .15em;
	font-family: 'Lato', sans-serif; 
	text-transform: uppercase;
	text-decoration: none;
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-ms-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}
#mainnav-menu a:link, #mainnav-menu a:visited {
	text-decoration: none;
	font-family: 'Lato', sans-serif; 
			font-size:14px;
			font-weight: 300;
			color:#d2da58;
			letter-spacing:2px;
			text-transform:uppercase;
			margin:0 13px;
			height:50px;
			line-height:50px;display:inline-block;
}
#mainnav-menu a:hover {
	background: #fff;
	color: #ff7a7f;
}

/* Drop-down Menu
-------------------------------------------------------------- */

#mainnav-menu ul {
	position: absolute;
	display: none;
	z-index: 99;
	left: -9999px;
	background: #fff;
	box-shadow: 0 0 2px #444;display:inline;
}
#mainnav-menu ul li{
	margin: 0;
	display: inline;
}
#mainnav-menu ul a {
	width: 250px;
	width: 16rem;
	padding: 1em;
    display:inline;
	font-weight: normal;
	color: #333;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#mainnav-menu ul a:link, #mainnav-menu ul a:visited{
	color: #333;
	font-size: 0.9em;
	text-decoration: none;
  display:inline-block;
  
}
#mainnav-menu ul a:hover {
	color: #fff;
	background: #e84747;
}
#mainnav-menu li ul ul {
	margin-left: 250px;
	margin-left: 16rem;
}
#mainnav-menu li:hover ul ul, #mainnav-menu li:hover ul ul ul, #mainnav-menu li:hover ul ul ul ul{
	display:none; left: 0;
}
#mainnav-menu li:hover ul, #mainnav-menu li li:hover ul, #mainnav-menu li li li:hover ul, #mainnav-menu li li li li:hover ul{
	display: block; left: 0;
}
#mainnav-menu li.current_page_item a, #mainnav-menu li.current-menu-item a {
	text-decoration: none; color: #ff7a7f;
}
#mainnav-menu li.current_page_item ul li a, #mainnav-menu li.current-menu-item ul li a{
	text-decoration: none; color: #ff7a7f;
}
#mainnav-menu ul li.current_page_item a, #mainnav-menu ul li.current-menu-item a {
	text-decoration: none; color: #ff7a7f;
}
#mainnav-menu ul li.current_page_item ul li a, #mainnav-menu ul li.current-menu-item ul li a{
	text-decoration: none; color: #ff7a7f;
}
<div id="navi-wrap">
		<nav id="mainnav" class="container clearfix" role="navigation">
			<h4 id="mainnav-icon">Menu</h4>
			<ul id="mainnav-menu" class="menu"><li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item menu-item-25"><a href="http://www.fitnessdelicious.com/">Home</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://www.fitnessdelicious.com/recipes/">Recipes</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-41"><a href="http://www.fitnessdelicious.com/diet/">Diet deliciously</a>
<ul class="sub-menu">
	<li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://www.fitnessdelicious.com/the-method/">The Method</a></li>
	<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://www.fitnessdelicious.com/the-tools/">The Tools</a></li>
</ul>
</li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.fitnessdelicious.com/sample-page/">Boutique</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://www.fitnessdelicious.com/active-living/">Active Living</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.fitnessdelicious.com/aging/">Youthful Aging</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://www.fitnessdelicious.com/about/">About</a></li>
</ul>		</nav>

Agregué la clase css ... funciona.

#mainnav-menu a:link, #mainnav-menu a:visited{
display:inline-block !important;
}
1
vrajesh 3 feb. 2015 a las 08:09

También puede utilizar un pseudo elemento antes o después para crear un relleno transparente. De esta manera puede extender la longitud del artículo.

0
Gcamara14 15 ago. 2018 a las 21:21

Prueba este código js fiddle: http://jsfiddle.net/mf3y6Lj6/2/

Its examples, you can follow this structure for the same
0
anji 3 feb. 2015 a las 07:42

En lugar de responder por usted, le señalaré dónde puede encontrar respuestas como esta en el futuro. Abra el panel de desarrollador en Chrome (Command Shift I) en una Mac, luego haga clic con el botón derecho en la barra de menú con la que está confundido y seleccione "Inspeccionar elemento".

Verá los elementos en su página y, para cada elemento seleccionado, verá los estilos que se le aplican en la pestaña de estilos.

A modo de ejemplo: sólo un vistazo rápido al suyo, veo que se está aplicando un color a la clase de blanco del icono de navegación. Cuando hago clic para desactivarlo, veo que el resto del texto aparece en negro. Entonces está ahí, ahora necesita encontrar dónde se establece el color rojo. Busque en la lista de elementos y la pestaña de estilo y lo encontrará.

0
Cooper Buckingham 3 feb. 2015 a las 06:14