Bootstrap NavBar的自定义样式

Question

我正在尝试使用完全不同的样式更改bootstrap导航栏。

我需要更改其默认样式 -

目前我完成了80％以上的工作，而我唯一无法完成的是hover和active的行动。

到目前为止这是我的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;
} 

那么，我可以从专业人士那里获得任何帮助，以便在不使用任何图像的情况下完成这项工作吗？

This is the way I have tried it.

任何想法都会高度赞赏。 谢谢。

Answer 1

您可以在:hover（shadow）上使用 browsers that support it 属性：

我在 jsBin ：

中做了一些更改

.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＆gt; = 9.0

的确定，那么您可以使用此属性