Question

我试图将子菜单放在CSS Grid中主菜单的正下方，同时将鼠标悬停在多个主菜单组件上。我不知道如何在CSS网格中放置子菜单。

我从此处改编了HTML和CSS代码：https://css-tricks.com/solved-with-css-dropdown-menus/

工作：当我将鼠标悬停在主菜单上时，出现子菜单

不起作用：来自多个主菜单组件的所有子菜单都显示在同一位置，我不知道如何将它们放在主菜单组件的正下方。

HTML

<ul>
   <li class="home menu"><a href="#home.html">Home</a>
       <ul class="home-dropdown">
           <li><a href="#vocalcoaching">Vocalcoaching</a></li>
           <li><a href="#circlesinging">Circlesinging</a></li>
       </ul>
    </li>

   <li class="uber menu"><a href="#uber.ich.html">Über mich</a></li> 
   <li class="vocal menu"><a href="#">Vocalcoaching</a>
       <ul class="vocal-drop">
           <li><a href="#vocalcoaching">Gesangunterricht</a></li>
           <li><a href="#songwriting">Songwriting</a></li> 
           <li><a href="#tech">Technische Geräte</a></li> 
       </ul>
   </li>

   <li class="circle menu"><a href="#">Circlesinging</a>
       <ul class="circle-drop">
           <li><a href="#what">Was ist Was</a></li>
           <li><a href="#volume1">Volume 1</a></li> 
           <li><a href="#volume2">Volume 2</a></li>
           <li><a href="#volume3">Volume 3</a></li>
       </ul>
   </li>

CSS

ul {
 display:grid;  
 grid-template-columns: repeat(7, minmax(10%, 1fr));
 justify-items: center;
 margin: 5% 10%;
 text-align: left;

}

ul li {
   padding: 2% 0;
}

li {
   list-style-type: none;
   display: block;
   transition-duration: 1.5s;
}

li:hover {
 cursor: pointer;
}

ul li ul {
 visibility: hidden;
 opacity: 0;
 position: absolute;
 transition: all 0.15s ease;
 margin-top: 1rem;
 left: 0;
 display: none;
   padding:0;
}

ul li:hover > ul,
ul li ul:hover {
 visibility: visible;
 opacity: 1;
 display: block;
 background-color:beige;    
}

ul li:hover > ul,
.home-dropdown li .home-dropdown:hover {
   margin-right: 60%;    
}

ul li ul li {
 clear: both;
 width: 100%;
 margin-top:2%;
}

我无法使用CSS GRID在特定菜单菜单下对齐子菜单位置

Answer 1

.outer {
  display: grid;
  grid-template-columns: repeat(7, minmax(10%, 1fr));
}

li {
  list-style-type: none;
}

.dropdown {
  display: none;
  padding: 0;
}

.menu:hover>.dropdown,
.dropdown:hover {
  display: block;
}

<ul class="outer">
  <li class="home menu"><a href="#home.html">Home</a>
    <ul class="dropdown home-dropdown">
      <li><a href="#vocalcoaching">Vocalcoaching</a></li>
      <li><a href="#circlesinging">Circlesinging</a></li>
    </ul>
  </li>

  <li class="uber menu"><a href="#uber.ich.html">Über mich</a></li>
  <li class="vocal menu"><a href="#">Vocalcoaching</a>
    <ul class="dropdown vocal-drop">
      <li><a href="#vocalcoaching">Gesangunterricht</a></li>
      <li><a href="#songwriting">Songwriting</a></li>
      <li><a href="#tech">Technische Geräte</a></li>
    </ul>
  </li>

  <li class="circle menu"><a href="#">Circlesinging</a>
    <ul class="dropdown  circle-drop">
      <li><a href="#what">Was ist Was</a></li>
      <li><a href="#volume1">Volume 1</a></li>
      <li><a href="#volume2">Volume 2</a></li>
      <li><a href="#volume3">Volume 3</a></li>
    </ul>
  </li>

Answer 2

您只需要将create_table "accounts", force: :cascade do |t| t.string "name" t.datetime "created_at", precision: 6, null: false t.datetime "updated_at", precision: 6, null: false end create_table "users", force: :cascade do |t| t.string "email", default: "", null: false t.string "encrypted_password", default: "", null: false t.string "reset_password_token" t.datetime "reset_password_sent_at" t.datetime "remember_created_at" t.integer "sign_in_count", default: 0, null: false t.datetime "current_sign_in_at" t.datetime "last_sign_in_at" t.inet "current_sign_in_ip" t.inet "last_sign_in_ip" t.integer "role" t.datetime "created_at", precision: 6, null: false t.datetime "updated_at", precision: 6, null: false t.integer "sash_id" t.integer "level", default: 0 t.bigint "account_id" t.index ["account_id"], name: "index_users_on_account_id" t.index ["email"], name: "index_users_on_email", unique: true t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true end添加到主菜单position: relative;项中。

您的子菜单（li）是ul li ul，因此其父级position: absolute;需要li属性集。绝对定位的元素会将自己定位到最接近的非静态元素，因此，无需将父主菜单项设置为相对，它们会将自己全部定位到容器元素。

position: relative;

ul {
 display:grid;  
 grid-template-columns: repeat(7, minmax(10%, 1fr));
 justify-items: center;
 margin: 5% 10%;
 text-align: left;

}

ul li {
   padding: 2% 0;
}

li {
   list-style-type: none;
   display: block;
   transition-duration: 1.5s;
   position: relative;
}

li:hover {
 cursor: pointer;
}

ul li ul {
 visibility: hidden;
 opacity: 0;
 position: absolute;
 transition: all 0.15s ease;
 margin-top: 1rem;
 left: 0;
 display: none;
   padding:0;
}

ul li:hover > ul,
ul li ul:hover {
 visibility: visible;
 opacity: 1;
 display: block;
 background-color:beige;    
}

ul li:hover > ul,
.home-dropdown li .home-dropdown:hover {
   margin-right: 60%;    
}

ul li ul li {
 clear: both;
 width: 100%;
 margin-top:2%;
}

如何在CSS网格的主菜单下对齐子菜单

2 个答案: