How do i achieve hover effect on menu from a existing css file

Question

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 4-Mar-16 21:00pm

Banerjee Tanmoy

Updated 6-Mar-16 20:36pm

Patrice T

v3

Add a Solution

2 solutions

Solution 1

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

hover
CSS :hover Selector[^]

Posted 4-Mar-16 21:25pm

Patrice T

Updated 4-Mar-16 21:39pm

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.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Banerjee Tanmoy · Accepted Answer · 2016-03-06T20:36:00

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.