0
我遇到了一個問題，我需要解決以展示網站。如何在我的網站中添加底部邊框動畫？
當我懸停我的菜單時，邊框沒有向上移動，只有我的字體向上移動了一下。
.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{
\t clear:both;
\t font-size:80%;
\t padding:20px 0;
}
footer ul{
\t margin:0;
\t padding:0;
}
/*colors and backgrounds*/
body{
\t background:#fff;
}
h1, h2, h3, h4, h5, h6{
\t color:#333;
}
footer{
\t background:#333;
\t color:#ccc;
}
footer h1, footer h2, footer h3, footer h4{
\t color:#CCC;
\t margin-bottom:10px;
}
footer ul{
\t margin:0 0 0 8%;
}
a.buttonlink{
\t background:#0099ff;
\t border-radius:7px;
\t color:#fff;
\t display:block;
\t float:left;
\t margin:10px 15px 10px 0;
\t padding:10px;
\t text-decoration:none;
}
a.buttonlink:hover{
\t background:#8dbc01;
}
.greenelement{
\t background:#5ec79e;
\t color:#fff;
}
.violetelement{
\t background:#887dc2;
\t color:#fff;
}
/* Contain floats*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.row:after{
clear: both;
}
aside {
\t float:right;
\t width:30%;
}
/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}
.srt-menu, .srt-menu * {
\t margin: \t \t \t 0;
\t padding: \t \t 0;
\t list-style: \t \t none;
}
.srt-menu ul {
\t position: \t \t absolute;
\t display:none;
\t width: \t \t \t 12em; /* left offset of submenus need to match (see below) */
}
.srt-menu ul li {
\t width: \t \t \t 100%;
}
.srt-menu li:hover {
\t visibility: \t \t inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
\t float: \t \t \t left;
\t position: \t \t relative;
\t margin-left:1px;
}
.srt-menu li li {
\t margin-left:0px;
}
.srt-menu a {
\t display: \t \t block;
\t position: \t \t relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
\t display:block;
\t left: \t \t \t 0;
\t top: \t \t \t 45px; /* match top ul list item height */
\t z-index: \t \t 99;
\t -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 {
\t top: \t \t \t -999em;
}
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
\t left: \t \t \t 12em; /* match ul width */
\t top: \t \t \t 0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
\t top: \t \t \t -999em;
}
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {
\t left: \t \t \t 10em; /* match ul width */
\t top: \t \t \t 0;
}
/*** DEMO1 SKIN ***/
#topnav, .srt-menu {
\t float:right;
\t margin: .35em 0 0 0;
}
.srt-menu a {
\t text-decoration:none;
}
.srt-menu li a {
\t background:#fff;
\t margin:0;
\t padding:10px 20px;
\t height:45px;
}
.srt-menu a, .srt-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
\t color: \t \t \t #0099ff; \t
}
.srt-menu li li a {
\t \t border-top: \t \t 1px solid rgba(255,255,255,.2);
\t \t background: \t \t #333; /*fallback for old IE*/
\t \t background:rgba(0,0,0,.6);
\t \t color: \t #fff;
\t \t padding-left:20px;
\t \t height:auto;
}
.srt-menu li li a:visited{color:#fff;}
.srt-menu li li li a,
.srt-menu li.current * li a{
\t padding-left:20px;
\t 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{
\t color:green;
\t 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的菜單？
我想讓底部邊框在我懸停時移入，並在離開「按鈕」時移出。
後端？ 這樣的菜單應該顯示在右側 –
您有取出content =「no」並刷新頁面 – mlegg