Question

这是我尝试创建的自定义导航栏的CSS代码。

#CustomNavBar{ 
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px; }

.dropdown-menu li:hover .sub-menu {
    visibility: visible; }

.dropdown:hover .dropdown-menu {
    display: block; }

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0; }

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px; } .navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
        left: 10px; } 
}

当我在描述导航栏的同一HTML文件中使用<style></style>标签而不使用#CustomNavBar id属性时，它可以正常工作。

这是我的HTML代码段：

<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Something</title>
     <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
     <link type="text/css" rel="stylesheet" href="/bmcfg/include/MainNavBar.css" />
  </head>

  <body> 


<nav class="navbar navbar-inverse" id="CustomNavBar">
    <div class="container-fluid">
        <div class="navbar-inner">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#MainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Hello</a>
        </div>
        <div class="collapse navbar-collapse " id="MainNavBar">

我无法弄清楚我在使用id属性自定义导航栏时出错了吗？

Answer 1

您需要在每个css声明行

上添加id选择器

#CustomNavBar .dropdown-menu .sub-menu { .. }
#CustomNavBar .dropdown-menu li:hover .sub-menu { .. }
#CustomNavBar .dropdown:hover .dropdown-menu { .. }

LESS或SASS使嵌套更容易分配

Answer 2

您在使用css时使用 less 语法。你不能在css中嵌套属性。如果要嵌套属性，则应使用less。

相反，你应该做这样的事情

#CustomNavBar .dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px; 
}

只有使用less或scss才能进行嵌套。

#CustomNavBar{
    .property1{
      ....
    }
}

Answer 3

你所有的选择器都嵌套在#CustomNavBar中。您需要使用LESS或SASS或在所有选择器前面添加#CustomNavBar选择器。

使用id标签自定义导航栏不会做任何事情

3 个答案: