Question

我正在创建一个大学项目。我想使用全角下拉菜单。虽然，我不知道为什么要得到这个输出。我已经尝试了很多方法，但是无法获得正确的输出。

我想要的输出是

这是我的代码。

.clearfix:before,.clearfix:after{
                content: " ";
                display: table;
            }
            .clearfix:after{
                clear: both;
            }
            
            .head_nav{
                top: 0;
                position: sticky;
                z-index: 1;
                background-color: #262626;
                margin-bottom: 8px;
            }
            .head_nav a{
                color: #d9d9d9;
                float: left;
                text-decoration: none;
            }
            .head_nav a:hover{
                color: white;
                text-decoration: none;
            }
            .dropdown {
                float: left;
            }
            .dropdown .menu_button {
                font-size: 16px;  
                border: none;
                outline: none;
                color: white;
                background-color: inherit;
            }
            .menu_dropdown .header {
                background: red;
                padding: 16px;
                color: white;
            }
            .menu_dropdown {
                display: none;
                position: absolute;
                width: 100%;
                left: 0;
                z-index: 1;
                background-color: #262626;
            }
            .dropdown:hover .menu_dropdown {
                display: block;
            }
            .menu_dropdown a:hover {
                color: white;
            }
            .dropdowncontainer{
                background-color: inherit;
            }

<div class="head_nav clearfix">
                <a href="#">Home</a>
                <div class="dropdown">
                    <button class="menu_button">
                        <i class="fa fa-bars" aria-hidden="true"></i>
                    </button>
                    <div class="menu_dropdown">
                        <div class="dropdowncontainer">
                            <a href="#">Register</a>
                            <a href="#">Login</a>
                            <a href="#">Admin</a>
                        </div>
                    </div>
                </div>
            </div>

我希望此下拉菜单的宽度为全角，并且所有内容保持对齐。谁能帮我吗？

Answer 1

请尝试下面的代码。

.clearfix:before,.clearfix:after{
            content: " ";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }

        .head_nav{
            top: 0;
            position: sticky;
            z-index: 1;
            background-color: #262626;
            margin-bottom: 8px;
        }
        .head_nav a{
            color: #d9d9d9;
            float: left;
            text-decoration: none;
        }
        .head_nav a:hover{
            color: white;
            text-decoration: none;
        }
        .dropdown {
            float: left;
            width:100%;
        }
        .dropdown .menu_button {
            font-size: 16px;  
            border: none;
            outline: none;
            color: white;
            background-color: inherit;
        }
        .menu_dropdown .header {
            background: red;
            padding: 16px;
            color: white;
        }
        .menu_dropdown {
            display: none;
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 1;
            background-color: #262626;
        }
        .menu_dropdown a{
          display:inline-block;
          width:100%;
        }
        .dropdown:hover .menu_dropdown {
            display: block;
        }
        .menu_dropdown a:hover {
            color: white;
        }
        .dropdowncontainer{
            background-color: inherit;
        }

<div class="head_nav clearfix">
        <a href="#">Home</a>
        <div class="dropdown">
            <button class="menu_button">
                <i class="fa fa-bars" aria-hidden="true">i</i>
            </button>
            <div class="menu_dropdown">
                <div class="dropdowncontainer">
                    <a href="#">Register</a>
                    <a href="#">Login</a>
                    <a href="#">Admin</a>
                </div>
            </div>
        </div>
    </div>

Answer 2

在CSS的末尾添加此项以取消浮动下拉菜单项并为其提供完整宽度。

.menu_dropdown a {
  float: none;
  display: block;
  width: 100%;
}

Answer 3

这是满足您需要的简单代码版本。您可以根据自己的要求进行更改

const $menuIcon = document.querySelector('.fa-bars');
const $secondaryNav = document.querySelector('.secondary-nav');

const toggleSecondaryNav = (add) => {
  if (add)
    $secondaryNav.classList.add('show-secondary-nav');
  else
    $secondaryNav.classList.remove('show-secondary-nav');
};

$menuIcon.addEventListener('mouseover', (e) => toggleSecondaryNav(true));
$menuIcon.addEventListener('mouseout', (e) => toggleSecondaryNav(false));

$secondaryNav.addEventListener('mouseover', (e) => toggleSecondaryNav(true));
$secondaryNav.addEventListener('mouseout', (e) => toggleSecondaryNav(false));

body {
  margin: 0;
}

.main-nav {
  background-color: #222;
  padding: 0 25px;
  display: flex;
  align-items: center;
}

.main-nav a {
  padding: 15px 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}

i.fa-bars {
  color: #fff;
  margin: 0 0 0 15px;
  cursor: pointer;
  font-size: 1.7rem;
  padding: 10px;
}

i.fa-bars:hover {
  background-color: red;
}

.secondary-nav {
  background-color: #000;
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s ease;
}

.secondary-nav a {
  margin: 0 0 0 20px;
  padding: 8px 15px;
}

.secondary-nav a:first-child {
  margin-top: 10px;
}

.secondary-nav a:last-child {
  margin-bottom: 10px;
}

.show-secondary-nav {
  max-height: 170px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<nav>
 <div class="main-nav">
   <a href="#">Home</a>
   <i class="fas fa-bars"></i>
 </div>
 <div class="secondary-nav">
   <a href="#">Register</a>
   <a href="#">Login</a>
   <a href="#">Admin</a>
 </div>
</nav>

Answer 4

删除.dropdown类float:left并添加以下给定的CSS：

.menu_dropdown .dropdowncontainer a{
  display:block;
  width:100%;
}

body{
margin:0px;
padding:0px;
}

.clearfix:before,.clearfix:after{
            content: " ";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }

        .head_nav{
            top: 0;
            position: sticky;
            z-index: 1;
            background-color: #262626;
            margin-bottom: 8px;
        }
        .head_nav a{
            color: #d9d9d9;
            float: left;
            text-decoration: none;
        }


        .dropdown .menu_button {
            font-size: 16px;  
            border: none;
            outline: none;
            color: white;
            background-color: inherit;
        }
        .menu_dropdown .header {
            background: red;
            padding: 16px;
            color: white;
        }
        .menu_dropdown {
            display: none;
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 1;
            background-color: #262626;
        }
        .menu_dropdown .dropdowncontainer a{
          display:block;
          width:100%;
        }
        .menu_button:hover+.menu_dropdown {
            display: block;
        }
        .menu_dropdown a:hover {
            color: white;
        }
        .dropdowncontainer{
            background-color: inherit;
        }

<script src="https://use.fontawesome.com/ecdc7512a9.js"></script>


<div class="head_nav clearfix">
     
     <a href="#">Home</a>
        <div class="dropdown">
            <button class="menu_button">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </button>
            <div class="menu_dropdown">
                <div class="dropdowncontainer">
                    <a href="#">Register</a>
                    <a href="#">Login</a>
                    <a href="#">Admin</a>
                </div>
            </div>
        </div>
    </div>

在CSS的下拉菜单中无法获得全宽

4 个答案: