Transitioning Menus with Submenu Animation

After following a CSS menu tutorial and customizing it, two issues have arisen. When hovering over the "About" menu with additional list links, the transition works but then the content shifts to the left and fades out. The second issue is related to trying to make the bottom border slide up using CSS transition, which currently only results in fading the color in. I've experimented with height, margin-bottom, bottom properties, but none have been successful so far. The code and fiddle can be found below:

HTML

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>About Us</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>The School</span></a>
         </li>
         <li class='has-sub'><a href='#'><span>Instructors</span></a>
         </li>

      </ul>
   </li>
   <li><a href='#'><span>Classes</span></a></li>
   <li><a href='#'><span>Schedule</span></a></li>
   <li><a href='#'><span>News</span></a></li>
   <li><a href='#'><span>Programs</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div> 

CSS

 a {
    -webkit-transition: all 0.2s linear 0.2s;
    -moz-transition: all 0.2s linear 0.2s;
    -ms-transition: all 0.2s linear 0.2s;
    -o-transition: all 0.2s linear 0.2s;
    transition: all 0.2s linear 0.2s;}

#cssmenu { width: 840px; padding: 0; margin: 0; border: 0; }  
#cssmenu ul, #cssmenu li { list-style: none; margin: 0; padding: 0; }
#cssmenu ul { position: relative;  z-index: 597; }

#cssmenu ul li { text-align:center; width: 120px; float: left; min-height: 1px; vertical-align: middle; }
#cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; }
#cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; }
#cssmenu ul ul li { float: none; width: 200px;  }
#cssmenu ul li:hover > ul { visibility: visible; }
#cssmenu ul ul li { bottom: 100; left: 0; margin-top: 0; font-weight: normal; }

#cssmenu a { display: block; line-height: 1em; text-decoration: none; }

#cssmenu { background: #000; font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; font-size: 12px; }
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after { display: block; clear: both; }
#cssmenu ul ul a {background: #333;color: #FFF; border: 1px solid #fff; border-top: 0 none; line-height: 150%; padding: 16px 20px; }
#cssmenu ul ul li { position: relative; }

#cssmenu ul ul li:nth-child(1) > a { background: #333; border-bottom: 1px solid #FFF }
#cssmenu ul ul li:nth-child(1) > a:hover { color: #fff; background: #333}
#cssmenu ul ul li:nth-child(2) > a { background: #333; border-bottom: 1px solid #FFF;}
#cssmenu ul ul li:nth-child(2) > a:hover { color: #fff; background: #333; }



#cssmenu ul li:nth-child(1) > a { border-bottom: 5px solid #fff; }
#cssmenu ul li:nth-child(2) > a { border-bottom: 5px solid #ff6; }
#cssmenu ul li:nth-child(3) > a { border-bottom: 5px solid #f60; }
#cssmenu ul li:nth-child(4) > a { border-bottom: 5px solid #00f; }
#cssmenu ul li:nth-child(5) > a { border-bottom: 5px solid #0c6; }
#cssmenu ul li:nth-child(6) > a { border-bottom: 5px solid #63c; }
#cssmenu ul li:nth-child(7) > a { border-bottom: 5px solid #f00; }

#cssmenu ul li:nth-child(1) > a:hover { color: #000; background: #fff; }
#cssmenu ul li:nth-child(2) > a:hover { color: #000; background: #ff6; }
#cssmenu ul li:nth-child(3) > a:hover { background: #f60; }
#cssmenu ul li:nth-child(4) > a:hover { background: #00f; }
#cssmenu ul li:nth-child(5) > a:hover { background: #0c6; }
#cssmenu ul li:nth-child(6) > a:hover { background: grey; }
#cssmenu ul li:nth-child(7) > a:hover { background: #f00; }

#cssmenu ul ul li.has-sub > a:after                     {position: absolute;top: 50%;right: 15px;margin-top: -8px; }
#cssmenu ul li.has-sub > a:after                        { margin-left: 5px; }
#cssmenu a                                              { background: #000; color: white;padding: 0 20px; line--height: 45px;  }

Answer №1

To solve the issue of the sub-menu floating off to the left, consider adding position: relative; to the #cssmenu ul li.

If you want to achieve a color rising effect from the bottom, you can create an absolutely positioned <div> inside the <li>. Start with a height of 5px and expand it to cover the entire box upon hovering.

UPDATE

Check out this example on JSFiddle: http://jsfiddle.net/bbZS8/

I've implemented the effect only on the second tab (About Us).

#yellow-test 
{ 
    position: absolute; 
    bottom: -5px; 
    left: 0; 
    height: 5px; 
    width: 100%;
    background-color: #FF6; 
    color: #FF6;
    overflow: hidden;  
    line-height: 45px;
    -webkit-transition: height .25s ease;
       -moz-transition: height .25s ease;
         -o-transition: height .25s ease;
            transition: height .25s ease; 

}
#cssmenu ul li:hover > div 
{ 
    height: 50px; 
    color: #000;
}

While not perfect, this code provides a solid foundation for further customization.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

What are the steps for integrating a date and time picker bootstrap plugin?

Referencing a tutorial from http://www.w3schools.com/bootstrap/bootstrap_modal.asp: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <div id="myModal" class="modal fade" role= ...

Challenges with implementing emotion in Material UI 5

Recently, I upgraded my react app from Material UI 4 to 5 Beta. After consulting the documentation on the docs style library, I learned that the new version allows the use of emotion. However, when I attempted to implement it, I encountered an issue with t ...

Ways to customize the border of the ListItemButton when it's in a selected state using Material UI?

I'm currently working on a feature that involves highlighting a ListItemButton with a specific background color when selected. However, I now want to take it a step further and add an outline or border color around the ListItemButton when it is select ...

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxe ...

jQuery Masonry now renders "row blocks" as opposed to trying to fit elements into place

Have you ever heard of the jQuery masonry plugin? It's a great tool for placing images in "blocks" instead of trying to squeeze them into empty spaces. Take a look at this explanation: But how can we minimize those pesky "voids"? HTML: <!-- This ...

Toggle class with jquery if the checkbox is checked

I am trying to achieve a simple task using jQuery. I have a checkbox inside a box, and I want to toggle a class on the box with a transition when the checkbox is checked. However, my code is not working as expected. Here is what I have: $(document).ready( ...

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

Attempting to create an OutlinedInput with a see-through border, however encountering strange artifacts

Struggling to achieve a TextField select with outlined variant and a see-through border. Here's the current theme override I'm using: overrides: { MuiOutlinedInput: { root: { backgroundColor: '#F4F4F4', borderR ...

Proper HTML style linking with CSS

Describing the file structure within my project: app html index.html css style.css The problem arises when trying to link style.css as follows: <link rel="stylesheet" type="text/css" href="css/style.css"/> S ...

Turn off the Antd Datepicker tooltip

I'm using Antd Datepicker in my website. We get an array of numbers representing disabled dates from an external api and show only the dates in the datepicker(no month, year etc). The date selection is for a monthly subscription and the user just sele ...

How can ListSubheader in Material-UI be customized to match the style of iOS UITableView?

Here is the current appearance of my ListSubheader. https://i.stack.imgur.com/HAzTA.png Currently, it is just aligned to the left. However, the default header view in UITableView on iOS looks like this: https://i.stack.imgur.com/F9Amv.png It features ...

Creating square images in CSS without specifying their dimensions can easily be done by centering

Is there a way to create square images from rectangular ones in CSS, while ensuring they remain centered on the page? I have come across numerous solutions that use fixed pixel sizes, but I need my images to be responsive and set in percentages. Essential ...

Issue with Flexbox Layout - Flipping Card

As a newcomer to web development, my first project is a fan-page dedicated to Metallica. Here's the link to my project on Github. I'm currently facing an issue with the flex-box layout in the "Discography" section of the page. You can view the ...

A solitary block positioned at the heart of a grid - jquery mobile

Using grid in jQuery Mobile, I have designed a page and now looking to place a block exactly centralized on it. In the first grid, there are 2 blocks equally positioned. In the next grid, only one block is present and I want it to be centered. JSFiddle L ...

"When using FireFox, you can easily create a hyperlink that scrolls to a specific section of a webpage,

I have created a style for image button: .sticky { position: fixed; top: 50px; width: 120%; z-index: 1; } @media screen and (min-device-width : 100px) and (max-width: 600px) { .sticky{ display:none; } } and also implemented a script for it: ...

Focus on styling a single theader element within a jQuery Data Table with CSS

Struggling to work with a dynamic Jquery Data Table that has 10 table headers. I am having difficulty adding a class or an Id in the code to the specific th element with the title 'Unused'. In my .css file, I attempted: [title~= Unused] { ba ...

Disappearing text with HTML Bookmark and CSS Overflow:Hidden - What's happening?

Within the header of my webpage, there is an image div that has been styled with overflow:hidden. Inside the content section, I have a bookmark anchor tag: <a name="arghargh"></a> Located at the top of the content area, there is a link that ...

Unable to be implemented using inline-block styling

I'm struggling to get these 2 elements to display side by side using inline-block, I've tried everything but nothing seems to work. Goal: First element Second element I attempted to modify the HTML code to see if it would yield any results, b ...

Sometimes, in extremely rare instances, external stylesheets may fail to download or be properly applied

There have been very rare occurrences where major websites like Amazon and Facebook do not load a CSS file or apply the rules correctly, resulting in pages looking incomplete: I was recently asked to provide an internal explanation after receiving a compl ...