如何更改语义 UI 下拉菜单的边框样式？答案

【问题标题】：How to change the border styling of a dropdown menu of Semantic UI?如何更改语义 UI 下拉菜单的边框样式？
【发布时间】：2020-05-08 02:23:22
【问题描述】：

我使用 Semantic UI 作为下拉菜单，我只包含了 Semantic 的下拉菜单和过渡部分。我需要更改下拉列表中项目的边框，但除了第一个元素之外，其他元素都有粗体边框。我已将边框底部宽度设置为 0，让边框只有 3 个边，并使所有内容都统一，但它不起作用。

此外，当下拉切换在移动视图上展开时，“联系我们”部分将从导航栏切换中删除。（导航栏是用 Bootstrap 4 制作的。）

这是我用于下拉和下拉的 CSS。

.item{
  border-color: #812485 !important;
  border-bottom-width: 0px !important;
  border-width: 1px !important;
  color: #3F72AF !important;
  border-style: solid !important;
}
 .navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

这里是密码笔https://codepen.io/arnab4srk/pen/qBOoqre

【问题讨论】：

标签： html css bootstrap-4 dropdown semantic-ui

【解决方案1】：

正如我所见，您正在尝试在所有三个边上创建边框语义，因此您可以这样做，您需要做的就是通过检查其在代码中的位置来确保您的 CSS 正常工作

.navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

.ui.dropdown .menu>.item {
  border: 1px solid #3F72AF !Important;
  border-top: 0 !important;
}
.ui.dropdown .menu>.item:first-child {
 border-top: 1px solid #3F72AF !Important;
}

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <!--navbar-->
  <nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand h1" href="#">
      <div class="logo">
        <img src="Assets/Images/logoWhite.png" height="60px" width="47px">
        <img src="Assets/Images/textWhite.png" height="40px" width="116px" class="my-auto">
      </div>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#newsMenu" aria-controls="newsMenu" aria-expanded="false" aria-lable="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="newsMenu">
      <div class="navbar-nav">
        <a class="nav-item nav-link nav-pills" href="index.html">Home</a>

        <div class="ui dropdown">
          <a class="nav-item nav-link nav-pills dropdown-toggle" href="#">Courses</a>
          <div class="menu">
            <div class="item">
              Languages
              <div class="menu">
                <a class="courses item" href="courses/spanish.html">Spanish</a>
                <a class="courses item" href="courses/french.html">French</a>
                <a class="courses item" href="courses/german.html">German</a>
              </div>
            </div>

            <div class="item">
              Technical
              <div class="menu">
                <a class="courses item" href="courses/web.html">Web Development</a>
                <a class="courses item" href="courses/app.html">App Development</a>
                <a class="courses item" href="courses/ios.html">iOS Development</a>
                <a class="courses item" href="courses/c.html">C</a>
                <a class="item courses" href="courses/c++.html">C++</a>
                <a class="item courses" href="courses/java.html">Java</a>
                <a class="courses item" href="courses/python.html">Python</a>
              </div>
            </div>
            <div class="item">
              IOT with Robotics
              <div class="menu">
                <a class="courses item" href="courses/iot.html">Internet of Things</a>
                <a class="courses item" href="courses/robotics.html">Robotics</a>
                <a class="courses item" href="courses/drone.html">Drone Making</a>
              </div>
            </div>
            <div class="item">
              Marketing
              <div class="menu">
                <a class="courses item" href="courses/dm.html">Digital Marketing</a>
              </div>
            </div>
            </div>
          </div>
          <div class="ui dropdown">
            <a class="nav-item nav-link nav-pills dropdown-toggle" href="#">LearnLive</a>
            <div class="menu">
              <div class="item">
                LogIn
              </div>
              <div class="item">
                SignUp
              </div>
            </div>
          </div>
        <a class="nav-item nav-link nav-pills" href="aboutus.html">About Us</a>
        <a class="nav-item nav-link nav-pills active" href="#">Contact Us</a>
      </div>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
    <script src="https://kit.fontawesome.com/b3a074ef19.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.js"></script>
    <script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>   
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
</html>

这是你的决定，但我建议你保持这样，这样会更好。

.navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

.ui.dropdown .menu>.item {
  border-bottom: 1px solid #3F72AF !Important;
}
.ui.dropdown .menu>.item:last-child {
 border-bottom: 0 !Important;
}

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <!--navbar-->
  <nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand h1" href="#">
      <div class="logo">
        <img src="Assets/Images/logoWhite.png" height="60px" width="47px">
        <img src="Assets/Images/textWhite.png" height="40px" width="116px" class="my-auto">
      </div>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#newsMenu" aria-controls="newsMenu" aria-expanded="false" aria-lable="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="newsMenu">
      <div class="navbar-nav">
        <a class="nav-item nav-link nav-pills" href="index.html">Home</a>

        <div class="ui dropdown">
          <a class="nav-item nav-link nav-pills dropdown-toggle" href="#">Courses</a>
          <div class="menu">
            <div class="item">
              Languages
              <div class="menu">
                <a class="courses item" href="courses/spanish.html">Spanish</a>
                <a class="courses item" href="courses/french.html">French</a>
                <a class="courses item" href="courses/german.html">German</a>
              </div>
            </div>

            <div class="item">
              Technical
              <div class="menu">
                <a class="courses item" href="courses/web.html">Web Development</a>
                <a class="courses item" href="courses/app.html">App Development</a>
                <a class="courses item" href="courses/ios.html">iOS Development</a>
                <a class="courses item" href="courses/c.html">C</a>
                <a class="item courses" href="courses/c++.html">C++</a>
                <a class="item courses" href="courses/java.html">Java</a>
                <a class="courses item" href="courses/python.html">Python</a>
              </div>
            </div>
            <div class="item">
              IOT with Robotics
              <div class="menu">
                <a class="courses item" href="courses/iot.html">Internet of Things</a>
                <a class="courses item" href="courses/robotics.html">Robotics</a>
                <a class="courses item" href="courses/drone.html">Drone Making</a>
              </div>
            </div>
            <div class="item">
              Marketing
              <div class="menu">
                <a class="courses item" href="courses/dm.html">Digital Marketing</a>
              </div>
            </div>
            </div>
          </div>
          <div class="ui dropdown">
            <a class="nav-item nav-link nav-pills dropdown-toggle" href="#">LearnLive</a>
            <div class="menu">
              <div class="item">
                LogIn
              </div>
              <div class="item">
                SignUp
              </div>
            </div>
          </div>
        <a class="nav-item nav-link nav-pills" href="aboutus.html">About Us</a>
        <a class="nav-item nav-link nav-pills active" href="#">Contact Us</a>
      </div>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
    <script src="https://kit.fontawesome.com/b3a074ef19.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.js"></script>
    <script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>   
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
</html>

【讨论】：

【解决方案2】：

在上面的代码中，您将删除 border-bottom-width，然后使用 border-width: 1px; 再次添加它。

要从下拉列表中删除边框，只需使用：

.item{
  border: none !important;
  color: #3F72AF !important;
}

【讨论】：