How can i add the bottom border animation in my website? - html

Question

I ran into a problem which I need to solve to present the Website.
The border when I hover my menu isn't moving upwards, only my font moves up a bit.
.srt-menu li a {
transition: 0.3s ease;
background: #3fa46a;
color: red;
font-size: 20px;
text-decoration: none;
padding: 0px 0;
margin: 0 0px;
}
.srt-menu li a:hover{
transition: 0.3s ease;
background: transparent;
color: #1aa8a4;
text-decoration: none;
border-top: 1px solid red;
border-bottom: 4px solid #3fa46a;
padding: 0px 0;
margin: 0 0px;
}
.srt-menu li li a {
background:#e8e8e8;
padding-left:40px;
}
.srt-menu li li li a {
background:#efefef;
padding-left:80px;
}
/*SECONDARY MENU*/
#secondary-navigation{
margin-bottom:60px;
}
``#secondary-navigation ul{
margin:0;
padding:0;
}
#secondary-navigation ul li a{
background:#E6E6E6;
display:block;
margin:5px 0;
padding:10px;
text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
transition: 0.3s ease;
background: red;
color: #ffffff;
text-decoration: none;
border-top: 0px solid transparent;
border-bottom: 4px solid #3fa46a;
padding: 24px 0;
}
/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin-bottom:40px;
/*positioning and padding*/
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
/*FOOTER*/
footer{
clear:both;
font-size:80%;
padding:20px 0;
}
footer ul{
margin:0;
padding:0;
}
/*colors and backgrounds*/
body{
background:#fff;
}
h1, h2, h3, h4, h5, h6{
color:#333;
}
footer{
background:#333;
color:#ccc;
}
footer h1, footer h2, footer h3, footer h4{
color:#CCC;
margin-bottom:10px;
}
footer ul{
margin:0 0 0 8%;
}
a.buttonlink{
background:#0099ff;
border-radius:7px;
color:#fff;
display:block;
float:left;
margin:10px 15px 10px 0;
padding:10px;
text-decoration:none;
}
a.buttonlink:hover{
background:#8dbc01;
}
.greenelement{
background:#5ec79e;
color:#fff;
}
.violetelement{
background:#887dc2;
color:#fff;
}
/* Contain floats*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.row:after{
clear: both;
}
aside {
float:right;
width:30%;
}
/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}
.srt-menu, .srt-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.srt-menu ul {
position: absolute;
display:none;
width: 12em; /* left offset of submenus need to match (see below) */
}
.srt-menu ul li {
width: 100%;
}
.srt-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
float: left;
position: relative;
margin-left:1px;
}
.srt-menu li li {
margin-left:0px;
}
.srt-menu a {
display: block;
position: relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
display:block;
left: 0;
top: 45px; /* match top ul list item height */
z-index: 99;
-webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {
top: -999em;
}
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
left: 12em; /* match ul width */
top: 0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
top: -999em;
}
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** DEMO1 SKIN ***/
#topnav, .srt-menu {
float:right;
margin: .35em 0 0 0;
}
.srt-menu a {
text-decoration:none;
}
.srt-menu li a {
background:#fff;
margin:0;
padding:10px 20px;
height:45px;
}
.srt-menu a, .srt-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #0099ff;
}
.srt-menu li li a {
border-top: 1px solid rgba(255,255,255,.2);
background: #333; /*fallback for old IE*/
background:rgba(0,0,0,.6);
color: #fff;
padding-left:20px;
height:auto;
}
.srt-menu li li a:visited{color:#fff;}
.srt-menu li li li a,
.srt-menu li.current * li a{
padding-left:20px;
background:rgba(0,0,0,.6);
}
.srt-menu li:hover > a,
transition: 0.3s ease;
background: transparent;
color: #1aa8a4;
text-decoration: none;
border-top: 0px solid transparent;
border-bottom: 4px solid #3fa46a;
padding: 24px 0;
}
.srt-menu li li:hover > a{
color:green;
background:#0099ff;
}
<nav id="topnav" role="navigation">
<div class="menu-toggle">Menu</div>
<ul class="srt-menu" id="menu-main-navigation"><li class="current">Start<ul><li>Test</li></ul></li><li>Kontakt</li><li>Öffnungszeiten</li><li>Anfahrt</li><li>testststst</li></ul> </nav><!-- #topnav -->
<!-- main content area -->
<div class="wrapper" id="main">
Take a look on my website where you can see the problem in action.
How can I create the menu look like here?
I want the bottom border to move in when I hover on it, and move out when I leave the "button".

Answer 1

The example you are trying to copy is not structured the same way your site is.
On :hover, You can simply add a box-shadow for the bottom:
box-shadow: 0 4px 2px -2px gray;