Question

我的nav栏菜单有2个问题

文字背景颜色不适合nav栏背景，这意味着它周围有一些空白区域
当我点击菜单而不是打开nav栏外的下拉菜单时，它会在导航栏中打开它并拉伸导航栏背景颜色

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

试试这个

问题1的

，要使men下拉列表与mysite的样式相同，您可以使用，

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

问题2的

，将这三种样式添加到.dropdown-menu

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

样本

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

感谢你们的回复，aswin你解决了我的第二个问题，但首先仍然在那里如果你在这里运行它的红色小于蓝色background.technicaly idont想要红色和蓝色之间的任何边界或间隙非常感谢

如何修复我的CSS下拉菜单

2 个答案: