Click here to Skip to main content
15,908,674 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
This CSS style sheet I have got from multipurpose Purpose website template. The menu is working upon click and when again click will hide the menu. Instead of this I want to hover on the item and the menu shows and when I am leaving the mega menu section it automatically hides the menu. I have copied the code from GitHub - dragdropsite/mPurpose: Free multipurpose Twitter Bootstrap 3 template. A huge variety of components and more that 30 sample pages![^]

CSS
/*--------------------------------------------------------------------------
+	Main Menu Style
--------------------------------------------------------------------------*/
.mainmenu li.logo-wrapper a {
  border-right: 1px solid #E8E8E8;
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.mainmenu-wrapper {
  background-color: #FFF;
  border-bottom: 4px solid #16a085;
  z-index: 4;
}
.mainmenu {
  width: 100%;
  /* general ul style */
  /* first level ul style */
  /* sub-menu */
}
.mainmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.mainmenu > ul,
.mainmenu .mainmenu-submenu-inner {
  margin: 0 auto;
}
.mainmenu > ul > li,
.mainmenu .mainmenu-submenu-inner > li {
  display: inline-block;
  *display: inline;
}
.mainmenu > ul > li > a,
.mainmenu .mainmenu-submenu-inner > li > a {
  font-size: 1.2em;
  padding: 1.2em 1.5em;
  color: #999;
  display: inline-block;
  text-decoration: none;
}
.mainmenu > ul > li > a:hover,
.mainmenu .mainmenu-submenu-inner > li > a:hover {
  color: #16a085;
  text-decoration: none;
}
.mainmenu > ul > li.active > a,
.mainmenu .mainmenu-submenu-inner > li.active > a {
  color: #16a085;
  font-weight: 600 !important;
}
.mainmenu > ul > li.mainmenu-open a,
.mainmenu .mainmenu-submenu-inner > li.mainmenu-open a,
.mainmenu > ul li.mainmenu-open > a:hover,
.mainmenu .mainmenu-submenu-inner li.mainmenu-open > a:hover {
  color: #fff;
  background: #16a085;
}
.mainmenu .mainmenu-submenu {
  display: none;
  position: absolute;
  background: #16a085;
  width: 100%;
  left: 0;
  z-index: 999;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  color: 0 5px 5px rgba(0,0,0,0.4);
}
.mainmenu .mainmenu-submenu-inner > div {
  width: 33%;
  float: left;
}
.mainmenu .mainmenu-submenu-inner:before,
.mainmenu .mainmenu-submenu-inner:after {
  content: " ";
  display: table;
}
.mainmenu .mainmenu-submenu-inner:after {
  clear: both;
}
.mainmenu .mainmenu-submenu-inner > div a {
  line-height: 2em;
}
.mainmenu-open .mainmenu-submenu {
  display: block;
  padding-bottom: 3em;
}
.mainmenu-submenu h4 {
  color: #65ead0;
  padding: 1em 0 0.6em;
  margin-left: 20px;
  font-size: 160%;
  font-weight: 300;
}
.mainmenu-submenu ul {
  margin-left: 20px;
}
@media screen and (max-width: 979px) {
  .mainmenu {
    font-size: 0.8em;
  }
  .mainmenu-submenu {
    font-size: 1.2em;
  }
  .mainmenu-submenu li,
  .mainmenu-submenu h4 {
    padding-left: 10px;
  }
}
@media screen and (max-width: 479px) {
  .mainmenu {
    font-size: 120%;
    border: none;
  }
  .mainmenu > ul,
  .mainmenu .mainmenu-submenu-inner {
    width: 100%;
    padding: 0;
  }
  .mainmenu .mainmenu-submenu-inner {
    padding: 0 1.5em;
    font-size: 75%;
  }
  .mainmenu > ul > li {
    display: block;
    border-bottom: 4px solid #16a085;
  }
  .mainmenu > ul > li > a {
    display: block;
    padding: 1em 3em;
  }
  .mainmenu > ul > li:last-child {
    border: none;
  }
  .mainmenu .mainmenu-submenu {
    position: relative;
  }
  .mainmenu-submenu h4 {
    padding-top: 0.6em;
  }
  .mainmenu .mainmenu-submenu-inner > div {
    width: 100%;
    float: none;
    padding: 0;
  }
}


/*************** Html is ****************
HTML
     <nav id="mainmenu" class="mainmenu">
            <ul>
                <li class="logo-wrapper"><a href="index.html"><img src="img/mPurpose-logo.png" alt="Multipurpose Twitter Bootstrap Template"></a></li>
                <li class="active">
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="features.html">Features</a>
                </li>
                <li class="has-submenu">
                    <a href="#">Pages +</a>
                    <div class="mainmenu-submenu">
                        <div class="mainmenu-submenu-inner">
                            <div>
                                <h4>Homepage</h4>
                                <ul>
                                    <li><a href="index.html">Homepage (Sample 1)</a></li>
                                    <li><a href="page-homepage-sample.html">Homepage (Sample 2)</a></li>
                                </ul>
                                <h4>Services & Pricing</h4>
                                <ul>
                                    <li><a href="page-services-1-column.html">Services/Features (Rows)</a></li>

                                </ul>
                                <h4>Team & Open Vacancies</h4>
                                <ul>
                                    <li><a href="page-team.html">Our Team</a></li>

                                </ul>
                            </div>
                            <div>
                                <h4>Our Work (Portfolio)</h4>
                                <ul>
                                    <li><a href="page-portfolio-2-columns-1.html">Portfolio (2 Columns, Option 1)</a></li>

                                </ul>
                                <h4>General Pages</h4>
                                <ul>
                                    <li><a href="page-about-us.html">About Us</a></li>
                                    <li><a href="page-contact-us.html">Contact Us</a></li>
                                    <li><a href="page-faq.html">Frequently Asked Questions</a></li>

                                </ul>
                            </div>
                            <div>
                                <h4>eShop</h4>
                                <ul>
                                    <li><a href="page-products-3-columns.html">Products listing (3 Columns)</a></li>

                                    <li><a href="page-shopping-cart.html">Shopping Cart</a></li>
                                </ul>
                                <h4>Blog</h4>
                                <ul>

                                    <li><a href="page-news.html">Latest & Featured News</a></li>
                                </ul>
                            </div>
                        </div><!-- /mainmenu-submenu-inner -->
                    </div><!-- /mainmenu-submenu -->
                </li>
                <li>
                    <a href="credits.html">Credits</a>
                </li>
            </ul>
        </nav>
    </div>
</div>


What I have tried:

HTML
<style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>
 <pre lang="text">  
<ul id="drop-nav">
  <li><a href="#">Support</a></li>
  <li><a href="#">Web Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#">Content Management</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>
</ul>

But I failed to incorporate the feature in the existing one.
Please help me to understand, where I am failing
Posted
Updated 6-Mar-16 20:36pm
v3

To learn HTML and CSS, abuse this site
W3Schools Online Web Tutorials[^]

hover
CSS :hover Selector[^]
 
Share this answer
 
v2
Comments
Banerjee Tanmoy 5-Mar-16 3:42am    
But sir where I should add this on the above css
Patrice T 5-Mar-16 4:01am    
That's the problem with this kind of multipurpose template, it is overly complicated and beyond my expertise.
Why not ask the author of the template ?
Banerjee Tanmoy 5-Mar-16 4:21am    
Thank you sir, I better get rid of it and try to make one for me from scratch and try to increase my level in the field of CSS and HTML.

But for this question I think there may be solution hidden in the javascript which is called by mane; I am giving it for reference, if it helps

var mainMenu = (function() {

var $listItems = $( '#mainmenu > ul > li.has-submenu' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;

function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
}

function open( event ) {

var $item = $( event.currentTarget ).parent( 'li.has-submenu' ),
idx = $item.index();
if($item.length != 0){
if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'mainmenu-open' );
}

if( current === idx ) {
$item.removeClass( 'mainmenu-open' );
current = -1;
}
else {
$item.addClass( 'mainmenu-open' );
current = idx;
$body.off( 'click' ).on( 'click', close );
}
return false;
}
else window.location = $item.find('a').attr('href');
}

function close( event ) {
$listItems.eq( current ).removeClass( 'mainmenu-open' );
current = -1;
}

return { init : init };

})();
Patrice T 5-Mar-16 13:08pm    
Use Improve question to update the question, this way you are more likely to get other answers.
Finally I have found the solution

Add this :
li:hover > .mainmenu-submenu {
opacity: 1;
overflow: visible;
visibility: visible;
}

And update this

.mainmenu .mainmenu-submenu {

opacity: 0;
transition: all .3s ease .15s;
visibility: hidden;

/*display: none;*/ comment this .......

....
}
& done.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900