如何在我的网站中添加底部边框动画？

Question

我运行遇到了一个问题，我需要解决这个问题才能展示网站。

悬停菜单时边框没有向上移动，只有字体向上移动了一点。

 .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"><a href="http://zgraggen-zahnarzt.ch" target="_top" title="Start">Start</a><ul><li><a href="http://zgraggen-zahnarzt.ch/pages/start/test.php" target="_top" title="Test">Test</a></li></ul></li><li><a href="http://zgraggen-zahnarzt.ch/pages/kontakt.php" target="_top" title="Kontakt">Kontakt</a></li><li><a href="http://zgraggen-zahnarzt.ch/pages/oeffnungszeiten.php" target="_top" title="Öffnungszeiten">Öffnungszeiten</a></li><li><a href="http://zgraggen-zahnarzt.ch/pages/anfahrt.php" target="_top" title="Anfahrt">Anfahrt</a></li><li><a href="http://zgraggen-zahnarzt.ch/pages/testststst.php" target="_top" title="testststst">testststst</a></li></ul>       </nav><!-- #topnav -->
<!-- main content area -->
<div class="wrapper" id="main">

看看我的 website，您可以在其中看到实际问题。

如何创建看起来像 here 的菜单？

我希望鼠标悬停时底部边框向内移动，离开 "button" 时底部边框向外移动。

Answer 1

您尝试复制的示例的结构与您网站的结构不同。

在:hover上，您可以简单地为底部添加一个box-shadow：

box-shadow: 0 4px 2px -2px gray;

如何在我的网站中添加底部边框动画？

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

html

css

menu

styling

hover