Question

我是css的新手。我想在此页面上制作菜单的副本（不包括子菜单部分）：http://www.ibta-arabia.com/

这是我的css代码：

.menu {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.topnav {
    overflow: hidden;
    background-color: #2C4059;
}

.topnav a {
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #D90D29;
    color: white;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

当鼠标悬停在菜单上并且在我链接的网站上的菜单内容中放置分隔符时，我无法显示红线。

任何人都可以帮我调整我的css代码以查看其他网站上的菜单吗？

Answer 1

在这里你可以使用css伪元素在顶部显示边框：这里是你更新的小提琴代码：https://jsfiddle.net/yny2u85j/11/并删除border属性以锚定。

＆＃13;

.menu {
                              margin: 0;
                              font-family: Arial, Helvetica, sans-serif;
                    }


                    .topnav {
                              overflow: hidden;
                              background-color: #2C4059;
                    }


                    .topnav a {
                              float: left;
                              color: white;
                              text-align: center;
                              padding: 14px 16px;
                              text-decoration: none;
                              font-size: 17px;
                              position: relative;
                    }
                    
                    .topnav a:before {
                    content: '';
                    width: 100%;
                    opacity: 0;
                    transition: all ease .3s;
                    background: #D90D29;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 3px;
                    }

                    .topnav a:hover:before {
                              transition: all ease .3s;
                              opacity: 1;
                    }


                    .topnav a.active {
                              background-color: #4CAF50;
                              color: white;
                    }

＆＃13;

<div class="menu">

        <div class="topnav">
		  <a href="#">&nbsp;</a>
                  <a href="http://www.ibta-arabia.com/"><strong>Home</strong></a>
                  <a href="http://www.ibta-arabia.com/contact-us/"><strong>Contact Us</strong></a>
        </div>
</div>

＆＃13;

Answer 2

在.topnav a中添加border-top：2px solid transparent，然后在border.topnav中添加＃D90D29 a：hover和.topnav a：active

Answer 3

使用简单的边框样式检查更新的代码

＆＃13;

.menu {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
}


.topnav {
     overflow: hidden;
     background-color: #2C4059;
}


.topnav a {
     float: left;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;
}


.topnav a:hover {
     /*background-color: #D90D29;
     color: white; */
     border-top: 4px solid #d90d29;
}


.topnav a.active {
     background-color: #4CAF50;
     color: white;
}

＆＃13;

<div class="menu">

        <div class="topnav">
		  <a href="#">&nbsp;</a>
                  <a href="http://www.ibta-arabia.com/"><strong>Home</strong></a>
                  <a href="http://www.ibta-arabia.com/contact-us/"><strong>Contact Us</strong></a>
        </div>
</div>

＆＃13;

Css边框：悬停元素

3 个答案: