Html 引导导航栏的自定义样式

我试图用完全不同的风格来改变引导导航栏

这就是我需要更改其默认样式的方式-

目前，我已经完成了这项工作的80%以上，唯一无法完成的是它的

悬停

和

活动

这是我到目前为止的CSS-

.navbar-default {
    background-color: #000000;
    border-color: #ffffff;
    border-top: 1px solid #fff;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.navbar-default .navbar-brand {
    color: #f5f5f5;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #ffffff;
    background-color: transparent;
}

.navbar-default .navbar-text {
    color: #999999;
}

.navbar-default .navbar-nav > li > a {
    color: #f5f5f5;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: red;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: transparent;
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border-color: #333333;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #333333;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #000000;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent;
    color: #ffffff;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #f5f5f5;
    border-bottom-color: #f5f5f5;
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}

.navbar-default .navbar-link {
    color: #f5f5f5;
}

.navbar-default .navbar-link:hover {
    color: #ffffff;
}

.navbar-default .nav > li {
    border-right: 1px solid #FFFFFF;
}

.navbar-default .nav > li:last-child {
    border-right: none;
}

.navbar-default .navbar-nav > li > a {
    font-size: 90%;
    font-weight: bold;
    padding: 12px 24px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    outline: none;
}

.navbar-nav {
    background: #53001e;
    border: 1px solid #FFFFFF;
    border-radius: 7px;
    float: right;
    margin-top: -20px;
} 

那么，我能从这里的专业人士那里得到任何帮助来完成这项工作而不使用任何图像吗

任何想法都将受到高度赞赏。 多谢各位

您可以在

：hover

（）上使用属性：

我对您的做了一些更改：

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    outline: none;
    -webkit-box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
    -moz-box-shadow:    0px 18px 17px 0px rgba(152, 46, 255, 0.59);
    box-shadow:         0px 18px 17px 0px rgba(152, 46, 255, 0.59);
}

---

所以，如果你对IE>=9.0没问题的话，你可以使用这个属性。你想在悬停和活动状态下发生什么？@Dan我需要在菜单项下显示渐变。（在黑色背景上）。你可以在我的照片上看到。尼科莱，谢谢你的建议。我试过了。我刚刚发现它的列表项的结束白色底边。有什么想法吗？@TNK，这是不可能的（至少我不知道怎么做），因为您将

边框应用于整个菜单，它位于菜单项下。因此，可以尝试将边框应用于
li
或
a
元素，而不会显示边框。