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

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 的菜单？

我希望底部边框在我将鼠标悬停在其上时移入，并在我离开“按钮”时移出。

Answer 1

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

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

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