logo
down
shadow

My submenu of menu bar not getting visible


My submenu of menu bar not getting visible

By : user3042493
Date : November 28 2020, 12:01 PM
To fix the issue you can do You have multiple ul in li. Remove second ul element. it will display. Check below screenshots.
Before:
code :
<ul class='menu'> <!-- Customize Navigation Menu Here -->
  <li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
  <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
    <ul class='sub-menu'>
      <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
        <ul class='sub-menu'>
          <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
            <ul class='sub-menu'>
              <li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
              <li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
              <li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
              <!--<li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>-->
            </ul>
          </li>
          <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
          </li>
        </ul>

      </li>
      <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
      <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
      <li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
    </ul>
  </li>
  <!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
  <li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
  <li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
  <li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
</ul>


Share : facebook icon twitter icon
CSS/JQuery: how to create submenu for table row that stays visible mousing from row onto menu?

CSS/JQuery: how to create submenu for table row that stays visible mousing from row onto menu?


By : horus
Date : March 29 2020, 07:55 AM
hop of those help? On the tr's mouseenter event, assign the row a class of "highlighted" and display your menu.
On the menu's mouseleave event hide the menu and remove the "highlighted" class from any row which has it.
code :
var $myMenu = $('#myMenu');

$('tr').mouseenter(function(){
    $this = $(this);
    $this.addClass('highlighted');
    $myMenu.appendTo($this).slideDown();
});

$myMenu.mouseleave(function(){
    $(this).slideUp();
    $('tr.highlighted').removeClass('highlighted');
});
HTML CSS: Fixed Menu with submenu, Submenu is appearing before hovering over menu

HTML CSS: Fixed Menu with submenu, Submenu is appearing before hovering over menu


By : Sergiu
Date : March 29 2020, 07:55 AM
will help you The reason this is happening, is because you are hiding .sub-menu with opacity:0, so basically it is still there and the :hover on the parent ul is being activated because the child ul is being hovered over.
You need to have it set to display:none and then display:block it upon hovering.
code :
.menu-wrap {
  position: fixed;
  z-index: 4;
  top: 0;
  width: 100%;
  text-align: left;
  background: #10345A;
}
.menu {
  width: 100%;
  margin: 0px;
  text-align: left;
}
.menu li {
  margin: 0px;
  list-style: none;
}
.menu a {
  transition: all linear 0.15s;
  color: white;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: white;
  background-color: #FF6600;
}
.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}
/*----- Top Level -----*/

.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}
.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #10345A;
  color: #FF6600;
}
/*----- Bottom Level -----*/

/* ADD THESE */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
.menu li:hover .sub-menu {
  z-index: 1;
  display: block; /* ADD ME */
  -webkit-animation: fadeIn 0.15s; /* ADD ME */
  animation: fadeIn 0.15s; /* ADD ME */
}
.sub-menu {
  width: 300px;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 0;
  background: gray;
  display: none; /* ADD ME */
}
.sub-menu li {
  display: block;
  font-size: 16px;
}
.sub-menu li a {
  padding: 10px 30px;
  display: block;
  text-decoration: none;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #10345A;
  color: #FF6600;
}
<div class="menu-wrap">
  <nav class="menu">
    <ul>
      <li><a href="#">Menu 1</a>
      </li>
      <li>
        <a href="#">Menu 2  <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 1</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 2</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Menu 3  <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 3</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 4</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 5</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
Css submenu not remain visible after menu unhover no javascript

Css submenu not remain visible after menu unhover no javascript


By : Radu Dragan
Date : March 29 2020, 07:55 AM
may help you . I want to use only css, no javascript. When I mouse hover the top-level menu I can display the submenu, but as soon as I unhover the top-level menu the submenu disapper. How could I solve this without using javascript? Have I missed something? , Move you has-children class onto the li and then make your selector:
code :
.has-children:hover > .sub-menu
.header ul {
  list-style: none;
  padding: 20px 30px;
}
.header li {
  float: left;
  position: relative;
}
.header li a {
  padding: 20px 30px;
}
.menu {
  clear: none;
  float: right;
  max-height: none;
}
.menu li ul {
  position: absolute;
}
.sub-menu {
  display: none;
}
.open-menu-link {
  display: none;
}
.has-children:hover > .sub-menu {
  display: block;
}
  <header class="header">
    <ul class="menu">
      <li><a href="#work">Work</a></li>
      <li class="has-children">
        <a href="#about">Haschildren</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 1</a></li>
          <li><a href="#link2">Child 2</a></li>
          <li><a href="#link3">Child 3</a></li>
        </ul>
      </li>
      <li><a href="#careers">Careers</a></li>
      <li class="has-children">
        <a href="#careers">About</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 3</a></li>
          <li><a href="#link2">Child 4</a></li>
        </ul>
      </li>
      <li><a href="#">end</a></li>
    </ul>
  </header>
Batch Submenu in submenu, command goto Main menu execute all commands in submenu

Batch Submenu in submenu, command goto Main menu execute all commands in submenu


By : Vazer Rahmani
Date : March 29 2020, 07:55 AM
it helps some times I am building like ultimate batch file with commands I use on a daily basis, let's go to the problem. So far I tried changing and having multiple variables, tried to break it apart as much as I could put " on almost everything but is it still the same. , Try like this :
code :
@echo off&cls
:start
cls
ECHO Main Menu
ECHO 1. Windows
ECHO 0. Exit
ECHO.
set /p choice=

if "%choice%"=="1" goto submenu_1
if "%choice%"=="0" exit
goto:error

:submenu_1
cls
ECHO Windows
ECHO 1 - Test Mode
ECHO 0 - Main Manu
ECHO.
set /p a=

if "%a%"=="1" goto submenu11
if "%a%"=="0" goto start
goto:error

:submenu11
cls
ECHO Test Mode
ECHO 1 - Enable Test Mode
ECHO 2 - Disable Test Mode
ECHO 0 - Main Menu
ECHO.

set /p b=

if "%b%"=="1" (
ECHO Enable Test Mode
ECHO.
bcdedit -set loadoptions DISABLE_INTEGRITY_CHECKS
bcdedit -set TESTSIGNING ON
ECHO
ECHO Windows will restart
ECHO.
Pause
rem shutdown -r -t 10
)

if "%b%"=="2" (
ECHO Disable Test Mode
ECHO.
bcdedit.exe -set loadoptions ENABLE_INTEGRITY_CHECKS
bcdedit.exe -set TESTSIGNING OFF
ECHO
ECHO Windows will restart
ECHO.
Pause
rem shutdown -r -t 10
)

if "%b%"=="0" goto start

:error
echo Invalid Answer
Showing a submenu on hover of the parent link, then keeping it visible until the mouse leaves the sub menu?

Showing a submenu on hover of the parent link, then keeping it visible until the mouse leaves the sub menu?


By : user879171
Date : March 29 2020, 07:55 AM
like below fixes the issue Figured it out actually. I was overcomplicating things by using .hover() and found that I could simply use mouseenter() and mouseleave() separately, but using the latter on the parent element of both the main menu item and its submenu. So when your mouse enters the parent menu item link, it shows its sub menu (I have multiple, so I had to use $(this) and find() or siblings() instead of hardcoding it). And when the mouse leaves the parent of both (so either the main link or the sub menu itself) it becomes hidden, as it should be.
Here's the code:
code :
$('.menu-item > a').mouseenter(function() {
  $(this).siblings('.sub-menu').show();

});

$('.menu-item').mouseleave(function() {
  $(this).find('.sub-menu').hide();
});
Related Posts Related Posts :
  • Unable to display 3 columns in same row in printed page using bootstrap
  • How to achieve selection of radio element on click of label
  • Heading elements appearing below content
  • How do I position a side section or div in relation to nav bar?
  • How to maintain button location regardless of image size
  • Flex Layout not following flex percentages
  • Some images not working in `background-image:url()`
  • How to add an icon preview to a html list of google store apps?
  • How to hide element overflow without cropping inline images/text?
  • Margin-Top is not working for me when attempting to adjust the location of a button
  • When I send a letter to the mail gives an error 'tuple' object has no attribute 'get'
  • How can i intentionally access the "Index of /" page on my local server?
  • Unable to position a image and text side by side using css/html
  • Text not re-displaying on click of button
  • How to use href attribute in a link tag accurately in android?
  • Repeated reference of classes causing text margins to shift
  • Are my home and about links hyperlinking to the right pages?
  • Tinted background image not working with Bootstrap
  • How can I stop my parallax div having a blurred background?
  • CSS hover effect to modify another element is not working
  • why section-testimonial is not placing correctly
  • Why doesn't my media screen query work, I can't make my website responsive?
  • Aligning inline-block elements horizontally
  • How do I display TypeScript code in "<code>" tags in an Angular app?
  • How can I change the color of input tag in a form when focusing on it?
  • How do I put a container in a fixed position with its own overflow?
  • How to fix text-alignment
  • Outlook not displaying a portion of HTML
  • Remove radio button text only with CSS
  • How to use "v-if" in Vue.js to render a <span> only if parent div has a specific property?
  • How to Extract just the Date from Angular Material Datepicker
  • @keyframes not working, I have tried everything i can think of
  • Bootstrap fix form to bottom of the page
  • How to hide a list element in html
  • How to stop repeating image
  • Angular - String interpolation of undefined variable
  • Is there any way to edit specific Column of table using mat-table in Angular material
  • How can I set a text as a shadow for a heading element?
  • How to fix the forms making the buttons overlap
  • Splitting XML into multiple HTML pages with XSLT?
  • How to justify empty divs in flex container
  • How to blur in CSS only one layer of when you have multiple layers in background-image?
  • Scrollable html table with fixed first row and first column, along with angular material controls within the cells of ta
  • In Django, how to extract ID attribute from html Input tag, WITHOUT using django forms
  • how to fix link tag in html after changing css
  • How do I add a top padding to the second row?
  • Is it possible to split XML into multiple HTML pages with page navigation?
  • AngularJS: responsive height in bootstrap
  • Hide second line of text with CSS
  • repeating-linear-gradient not working in Edge browser and internet Explorer Browser
  • how to make search and form category merges like amazon on bootstrap
  • Bootstrap: Rearranging rows into columns and changing the order of elements
  • How can I move a label under a text box?
  • How save LinearGradient To database
  • How to reposition an image with a linear gradient using css?
  • HTML audio will not play when page opened by batch file
  • CSS Three Tone Diagonal Background
  • How to use slots inside of template components in HTML
  • Using span tags in meta description & title, for dual languages
  • How to make an icon/span selectable by pressing Tab key?
  • shadow
    Privacy Policy - Terms - Contact Us © festivalmusicasacra.org