javascript - 如何修复我的 CSS 下拉菜单

我的 nav 栏菜单有 2 个问题

文本背景颜色不适合nav 栏背景，这意味着它周围有一些空白
当我单击菜单而不是打开 nav 栏外的下拉菜单时，它将在导航栏内打开它并拉伸(stretch)导航栏背景颜色

https://ibb.co/cR5Zt7 https://ibb.co/mvCKRS

body{
	padding-top: 20px;
}

#navbar{
	/*background color*/
	background-color:#498AA2;
	size:100% !important;
	background-position:inherit;
}
/*change color top menu*/
#text{
	background-color:#C11D1F;
	color: #FFFFFF;
	background-position:center;
}

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
  <div class="container">
     <a href="index.php" class="navbar-brand" id="text">my site</a>
        <ul class="nav navbar-nav">
        <!-- drop down menu-->
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
        <li><a href="#">Tshirt</a></li>
        <li><a href="#">pants</a></li>
        <li><a href="#">shoes</a></li>
        <li><a href="#">accessories</a></li>
        </ul>
        </li>
        </ul>
        </div>

最佳答案

试试这个

对于问题 1，要使 men 下拉菜单与 mysite 的样式相同，您可以使用，

<li class="dropdown navbar-brand" id="text">

对于问题2，将这三种样式添加到.dropdown-menu

#navbar .dropdown-menu {
  position: absolute;
  left: auto;
  right: 0;
}

sample 喜欢

body {
  padding-top: 20px;
}

#navbar {
  /*background color*/
  background-color: #498AA2;
  size: 100% !important;
  background-position: inherit;
}


/*change color top menu*/

#text {
  background-color: #C11D1F;
  color: #FFFFFF;
  background-position: center;
}

#navbar .dropdown-menu {
  position: absolute;
  left: auto;
  right: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top" id="navbar">
    <div class="container">
      <a href="index.php" class="navbar-brand" id="text">my site</a>
      <ul class="nav navbar-nav">
        <!-- drop down menu-->
        <li class="dropdown navbar-brand" id="text">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Tshirt</a></li>
            <li><a href="#">pants</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">accessories</a></li>
          </ul>
        </li>
      </ul>
    </div>

关于javascript - 如何修复我的 CSS 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48800028/

javascript - 如何修复我的 CSS 下拉菜单

上一篇：jQuery 切换 slider

下一篇：html - CSS Transition 不适用于我的网站，但适用于 codepen