css - 如何在CSS中的下拉菜单上创建悬停

Question

我创建了一个基于 HTML 和 CSS 的页面 我得到了全屏布局，但我不知道如何创建带有悬停的下拉菜单 我正在尽我最大的努力来找到我的灵感菜单。我的页面看起来不像我期望的那样。有人可以建议我一个明确的解决方案。我只使用过 HTML5 或 CSS3。请看一看，

* {
  padding: 0;
  margin: 0;
}

.screen_area {
  font: 12px/1.5 Helvetica, Arial, sans-serif;
  line-height: 1.3em;
  padding: 0;
  background: #fff;
}

.nav_bar,
.section li:first-child,
.nav>li>a,
.content_head,
.section li:first-child {
  text-transform: uppercase;
}

.nav_bar,
.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2 {
  padding: 5px 0;
}

.nav_bar,
.dropdown_menu {
  width: 100%;
}

.nav_bar {
  background-color: #333;
  line-height: 20px;
  letter-spacing: 0.6px;
}

.container_nav,
.legal,
.wrap {
  margin: 0 auto;
}

.clearfix {
  display: block;
}

.main_div,
.sub_menu {
  padding-top: 15px;
}

.main_div {
  height: 60px;
}

.img {
  width: 115px;
  fill: #000;
  background-color: transparent;
  background: url(logo_img.png) no-repeat;
}

.list_nav,
.img,
.nav,
.connect,
.dropdown .nav>li>a,
.nav>li>a,
.nav_login2,
.dropdown,
.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2,
.nav_user2 {
  display: inline-block;
}

a,
a:hover,
.badges .year {
  text-decoration: none;
}

a,
a:active,
a:hover {
  outline: 0;
}

.nav {
  line-height: 1px;
}

.list_nav,
.nav_search2 {
  vertical-align: top;
}

.shop-nav,
.nav li a {
  white-space: nowrap;
}

.dropdown .nav>li>a,
.search_term,
.dropdown_menu {
  box-sizing: border-box;
}

.dropdown .nav>li>a,
.dropdown {
  border: 2px solid #FFF;
}

.dropdown .nav>li>a,
.nav_bar {
  font-weight: 400;
}

.dropdown .nav>li>a,
.main_div,
.nav>li>a {
  vertical-align: middle;
}

.dropdown .nav>li>a {
  padding: 10px;
  margin: 0 1px;
}

.dropdown .nav>li>a,
.search_term,
.main_div,
.nav>li>a {
  color: #000;
}

.dropdown,
.nav_user2,
.nav_bar {
  font-family: Oswald, Helvetica, Arial;
}

.dropdown,
.drop:hover,
.dropdown:hover {
  border-bottom: none;
}

.dropdown {
  background-color: #FFFFFF;
  padding: 3px;
  margin: 0 0;
  line-height: 3px;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  font-spacing: .06px;
}

.nav>li>a {
  letter-spacing: 1px;
}

.dropdown,
.dropdown_trigger,
.dropdown_trigger2,
.artist_overlay li,
.btn_follow a,
.nav_bar {
  display: block;
}

.main_div,
.nav>li>a {
  font-size: 12.5px;
  font-weight: 500;
  padding: 10px 6px;
}

.search_term {
  /* padding-right: 16px; */
  background-color: #F4F4F4;
  width: 169px;
  height: 33px;
  padding-left: 10px;
}

input[type=text] {
  border: 0;
}

.menu_search2 {
  width: 211px;
  padding-top: 2px;
}

.button_search {
  color: #FFF;
}

.back {
  background-image: url("big_search.png");
  -webkit-transition: background .3s;
  transition: background .3s;
}

.menu_search2 button {
  height: 33px;
  width: 42px;
  font-size: 16px;
  border-radius: 0;
}

.search_border {
  line-height: 1em;
  cursor: pointer;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.button_search {
  overflow: visible;
  -webkit-appearance: button;
}

ul {
  list-style-type: none;
}

.nav_icons,
.nav_icons .nav>li {
  margin-left: 0;
}

.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2,
.screen_area {
  margin: 0;
}

.nav_icons .dropdown .dropdown_trigger.dropdown_trigger2 {
  width: 34px;
}

.dropdown_trigger,
.dropdown_trigger2 {
  width: 14px;
}

.wish_list {
  font-size: 23px;
}

.drop:hover {
  z-index: 100002;
  width: 31px;
}

.wish_list:hover {
  color: #739FB1;
}

.dropdown_trigger2 {
  background: url("cart.png") no-repeat;
}

.trig_drop,
.login {
  border: 2px solid transparent;
}

.trig_drop:hover,
.dropdown:hover,
.drop:hover {
  border: 2px solid #333;
}

.dropdown:hover {
  z-index: 100003;
}

.trig_drop:hover {
  z-index: 100001;
}

.nav_user2,
.badges .year {
  font-weight: 700;
}

.nav_user2,
.img {
  height: 35px;
}

.nav_user2 {
  border-right: 1px solid #BEBEBE;
  padding-top: 7px;
  font-spacing: .6px;
  width: 164px;
}

.search_term,
.dropdown,
.nav>li>a,
.nav_bar,
.btn_follow a,
.nav_login2 .nav>li>a {
  font-size: 13px;
}

.nav.adus {
  padding-left: 5px;
  padding-bottom: 3px;
}

.nav_link {
  margin-left: 10px;
}

.dropdown_menu,
.wrap,
.add {
  text-align: left;
}

.dropdown_menu {
  width: 225px;
  padding: 15px;
}

.dropdown_menu {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #FFF;
  z-index: 100000;
  border: 2px solid #000;
  padding: 20px;
}

.dropdown-menu,
.button_search,
.dropdown {
  -webkit-transform: translateZ(0);
}

.dropdown-menu {
  transform: translateZ(0);
  display: none;
}

.wrap,
.container_nav,
.copyright,
.legal,
.cont {
  width: 1022px;
}

.wrap,
.footer,
.legal {
  clear: both;
}

.wrap {
  padding: 5px 10px 0;
  height: 1261px;
}

.content_header {
  margin-bottom: 20px;
}

.content_header .label {
  font: 700 25px/30px Helvetica, sans-serif;
}

.label a:hover {
  color: #6EB1EC;
}

.col_small .menu div {
  margin-bottom: 15px;
}

.photo {
  border: 1px solid #eee;
  padding: 2px;
  width: 150px;
  background: #fff;
}

.btn_follow {
  margin: 10px 0;
}

.menu a:hover,
.sub_menu a:hover {
  color: #f06;
}

.add,
.col_small {
  width: 150px;
}

.add {
  background-color: #bbb;
  border-radius: 4px;
  padding: 3px 2px 2px 9px;
}

input[type=button]:hover {
  background-color: #AEE869
}

.sub_menu {
  border-top: 1px dotted #ccc;
}

.sub_menu h4 a {
  color: #888;
}

.sub_menu div {
  margin-bottom: 15px;
}

.badges {
  margin-bottom: 50px;
}

.badges .year,
.btn_follow a,
.nav_bar {
  color: #fff;
}

.badges .year,
.dropdown .nav>li>a {
  line-height: 16px;
}

.badges .year {
  border-radius: 50%;
  background-color: #e9008d;
  width: 14px;
  height: 14px;
  font-size: 11px;
  padding: 0 2px 2px 1px;
}

.badges .year,
.badges img {
  margin-right: 5px;
}

.badges .year,
.menu_search2 button,
.nav_bar,
.banner {
  text-align: center;
}

.col_big,
.content_head,
.profile_list {
  width: 840px;
}

.flip_container {
  cursor: pointer;
}

.flipper,
.artist_overlay li {
  width: 270px;
  height: 270px;
}

.flipper img.active {
  visibility: visible;
}

.artist_overlay li,
.shop-nav,
.nav li a {
  overflow: hidden;
}

.artist_overlay li {
  margin: 0 10px 10px 0;
}

.content_head.inner {
  margin-top: 30px;
}

.content_head {
  height: auto;
  padding-bottom: 19px;
}

.content_head {
  margin-bottom: 8px;
  border-bottom: 2px solid #333;
  height: 31px;
}

.content_head h3 {
  font: 700 24px/30px Helvetica, sans-serif;
  text-transform: none;
  float: none;
}

.content_head .subtitle {
  margin-top: 2px;
  font: 11px/13px Helvetica, sans-serif;
  color: #4a4a4a;
}

.content_head .latest_menu {
  bottom: 13px;
  font: 12px/14px Helvetica, sans-serif;
}

.content_head .latest_menu a {
  color: #2786c2;
}

.cards li {
  margin-right: 9px;
  float: left;
}

.fbcontainer,
.card {
  height: 20px;
}

.fbcontainer {
  width: 21px;
  margin-top: -4px;
  border-radius: 32px;
  background-image: url(cart.png);
}

.fbcontainer:hover {
  background-image: url(red_cart.png);
}

.cont {
  margin: 0px auto;
  height: 191px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

.connect {
  margin-top: 12px;
}

.img_fb {
  width: 68px;
  height: 101px;
}

.section li:first-child {
  color: #868684;
}

.banner {
  margin-right: 60px;
  width: 145px;
  height: 145px;
}

.section {
  margin-right: 49px;
  border: none;
  margin-top: 25px;
  height: 168px;
}

.footer a {
  color: #868684;
}

.section li a {
  color: #666;
}

.section li {
  margin-bottom: 3px;
}

.footer a:hover {
  text-decoration: underline;
}

.copyright {
  padding-top: 6px;
  height: 40px;
}

.card {
  text-indent: -9999px;
  width: 183px;
  background-image: url(cards.png);
}

.position {
  position: relative;
}

a {
  color: #000000;
  cursor: pointer;
}

.card,
.banner,
.fbcontainer,
.nav_icons,
.connect,
.content_head,
.latest_menu,
.menu_search2 button,
.col_big,
.content_head,
.profile_list {
  float: right;
}

.content_head,
.content_header h1 a,
.screen_area,
.content_header {
  color: #333px;
}

.copyright,
.section,
.artist_overlay li,
.badges,
.year,
.col_small,
.nav>li {
  float: left;
}

.add,
.search_border,
.screen_area {
  border: 0;
}

<body class="screen_area">
   <form name="big_screen" id="big_screen">
      <div class="nav_bar">20% Off + Free Worldwide Shipping on Everything Today!</div>
      <header class="main_div position">
         <div class="container_nav position clearfix">
            <div class="list_nav">
               <ul class="nav position">
                  <li class="dropdown position img">
                     <a href="#" class="trig_dropdown nav2_link" style="border: none"></a>
                  </li>
                  <li class="dropdown position art">
                     <a href="#" class="trig_dropdown nav2_link">Art</a>
                  </li>
                  <li class="dropdown position home">
                     <a href="#" class="trig_dropdown nav2_link">Home</a>
                  </li>
                  <li class="dropdown position tech">
                     <a href="#" class="trig_dropdown nav2_link">Tech</a>
                  </li>
                  <li class="dropdown position women">
                     <a href="#" class="trig_dropdown nav2_link">Women</a>
                  </li>
                  <li class="dropdown position men">
                     <a href="#" class="trig_dropdown nav2_link">Men</a>
                  </li>
               </ul>
            </div>
            <div class="nav_search2 nav">
               <div class="menu_search2 position">
                  <span>
                  <input type="text" name="search_text" id="search_text" class="search_term" placeholder="Search art & artists"/>
                  </span>
                  <span>
                  <button type="submit" name="search_button" id="search_button" class="button_search back search_border"></button>
                  </span>
               </div>
            </div>
            <div class="nav_icons">
               <ul class="nav position">
                  <li class="menu_wishlist dropdown position">
                     <a href="#"><span class="wish_list">&#9733;</span></a>
                  </li>
                  <li class="menu_cart drop">
                     <a href="#"><span class="fbcontainer"></span></a>
                  </li>
               </ul>
            </div>
            <div class="nav_user2">
               <ul class="nav position adus">
                  <li>
                     <a href="#" class="trig_drop nav2_link">Blog</a>
                  </li>
                  <li>
                     <a href="#" class="trig_drop nav_link">Discover</a>
                  </li>
               </ul>
            </div>
            <div class="nav_login2">
               <ul class="nav">
                  <li class="login dropdown position no_padding">
                     <a class="trig_dropdown ">Join | Login</a>
                  </li>
               </ul>
            </div>
         </div>
      </header>
   </form>
   <div class="wrap position">
      <div class="content clearfix">
         <div class="content_header">
            <div>
               <h1 class="label">
                  <a><span>Nick La</span></a>
               </h1>
            </div>
         </div>
         <div class="col_small">
            <div class="prof_image">
               <a href="#">
               <img src="nick_img.png" alt="nick_img.png" class="photo " />
               </a>
            </div>
            <div class="btn_follow">
               <input type="button" value="&plus;  Follow" name="add_button" id="add_button" class="add" />
            </div>
            <div class="menu">
               <div>
                  <h4>
                     <a href="#">Art Prints</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Framed Art Prints</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Canvas prints</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Metal Prints</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">iPhone & iPod Cases</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Stationery Cards</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">iPhone & iPod Skins</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Laptop & iPad Skins</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">V-neck T-shirts</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Long Sleeve T-shirts</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Tank Tops</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Biker Tanks</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Hoodies</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Throw Pillows</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Rectangular Pillows</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Carry-All Pouches</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Tote Bags</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Wall Clocks</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Mugs</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Rugs</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Laptop Sleeves</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Travel Mugs</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Metal Travel Mugs</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Comforters</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Bath Mats</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Floor Pillows</a>
                  </h4>
               </div>
            </div>
            <div class="sub_menu">
               <div>
                  <h4>
                     <a href="#">Promoted (2)</a>
                  </h4>
               </div>
               <div>
                  <h4>
                     <a href="#">Followers (157)</a>
                  </h4>
               </div>
               <div>
               </div>
            </div>
            <div class="badges">
               <div class="year">11</div>
               <img src="badge.png" alt="badge.png">
            </div>
         </div>
         <div class="col_big artist_shop">
            <div class="list_profile">
               <ul class="clearfix artist_overlay">
                  <li>
                     <div class="flip_container">
                        <div class="flipper">
                           <a class="event">
                           <img src="big_s1.png" alt="big_s1.png">
                           </a>
                        </div>
                     </div>
                  </li>
                  <li>
                     <div class="flip_container">
                        <div class="flipper">
                           <a class="event">
                           <img src="big_s2.png" alt="big_s2.png">
                           </a>
                        </div>
                     </div>
                  </li>
                  <li>
                     <div class="flip_container">
                        <div class="flipper">
                           <a class="event">
                           <img src="big_s3.png" alt="big_s3.png">
                           </a>
                        </div>
                     </div>
                  </li>
                  <li>
                     <div class="flip_container">
                        <div class="flipper">
                           <a class="event">
                           <img src="big_s4.png" alt="big_s4.png">
                           </a>
                        </div>
                     </div>
                  </li>
                  <li>
                     <div class="flip_container">
                        <div class="flipper">
                           <a class="event">
                           <img src="big_s5.png" alt="big_s5.png">
                           </a>
                        </div>
                     </div>
                  </li>
                  <li>
                     <div class="flip_container">
                        <div class="flipper">
                           <a class="event">
                           <img src="big_s6.png" alt="big_s6.png">
                           </a>
                        </div>
                     </div>
                  </li>
                  <li>
                     <div class="flip_container">
                        <div class="flipper">
                           <a class="event">
                           <img src="big_s7.png" alt="big_s7.png">
                           </a>
                        </div>
                     </div>
                  </li>
                  <li>
                     <div class="flip_container">
                        <div class="flipper position">
                           <a class="event">
                           <img src="big_s8.png" alt="big_s8.png">
                           </a>
                        </div>
                     </div>
                  </li>
                  <li>
                     <div class="flip_container">
                        <div class="flipper position">
                           <a class="event">
                           <img src="big_s9.png" alt="big_s9.png">
                           </a>
                        </div>
                     </div>
                  </li>
               </ul>
            </div>
         </div>
         <div class="content_head position inner">
            <h3>Latest</h3>
            <div class="subtitle">Uploaded By Nick La</div>
            <ul class="latest_menu position">
               <li>
                  <a href="#">See More</a>
               </li>
            </ul>
         </div>
         <div class="profile_list">
            <ul class="cards clearfix">
               <li>
                  <div class="image_wrap">
                     <a>
                     <img src="wrap_img1.png" alt="wrap_img1.png" />
                     </a>
                  </div>
               </li>
               <li>
                  <div class="image_wrap">
                     <a>
                     <img src="wrap_img2.png" alt="wrap_img2.png" />
                     </a>
                  </div>
               </li>
               <li>
                  <div class="image_wrap">
                     <a>
                     <img src="wrap_img3.png" alt="wrap_img3.png" />
                     </a>
                  </div>
               </li>
               <li>
                  <div class="image_wrap">
                     <a>
                     <img src="wrap_img4.png" alt="wrap_img4.png" />
                     </a>
                  </div>
               </li>
            </ul>
         </div>
      </div>
   </div>
   <div class="footer">
      <div class="cont clearfix">
         <div class="connect">
            <div class="connect_one">
               <span><img src="connect.png" alt="connect.png"></span>
            </div>
            <a class="img_fb"><img src="facebook.png" alt="facebook.png"></a>
            <a class="img_fb"><img src="twitter.png" alt="twitter.png"></a>
            <a class="img_fb"><img src="instagram.png" alt="instagram.png"></a>
            <a class="img_pin"><img src="pinterest.png" alt="pinterest.png"></a>
         </div>
         <div class="banner">
            <a class="join"><img src="join_us.png" alt="join_us.png" /></a>
         </div>
         <div class="heigh"></div>
         <div class="multi_col">
            <ul class="section">
               <li>Help</li>
               <li><a>Track My Order</a></li>
               <li><a>Return My Order</a></li>
               <li><a>Contact & FAQs</a></li>
               <li><a>Selling</a></li>
               <li><a>About Us</a></li>
               <li><a>Curator Program</a></li>
               <li><a>Wholesale Program</a></li>
            </ul>
            <ul class="section">
               <li>Shop</li>
               <li><a>Art Prints</a> <a> &   </a> <a>Framed Art Prints</a></li>
               <li><a>Stretched Canvases</a></li>
               <li><a>iPhone Cases</a></li>
               <li><a>Laptop Skins & iPhone Skins</a></li>
               <li><a>T-shirts & Hoodies</a></li>
               <li><a>Gift Cards</a></li>
            </ul>
            <ul class="section">
               <li>News & Promos</li>
               <li><a>Blog</a></li>
               <li><a>Collabs</a></li>
               <li><a>Newsletter</a></li>
               <li><a>Refer a Friend</a></li>
            </ul>
         </div>
      </div>
      <div class="legal clearfix">
         <div class="copyright">
            &copy; 2017 Society6, LLC. LG Commerce. Some rights reserved.
            <a href="#">Privacy Policy</a> |
            <a href="#">Term of Service</a>
            <div class="card">
               Visa, Mastercard, PayPal, American Express, Discover
            </div>
         </div>
      </div>
   </div>
</body>

Answer 1

你可以试试这个...使用 :hover 添加类

.mainmenu {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 15px;
  -webkit-transition: all .5s;
}

.submenu {
  position: absolute;
  height: 0px;
  opacity: 0;
  -webkit-transition: all .5s;
}

.mainmenu:hover {
  border: 1px solid #000;
  -webkit-transition: all .5s;
}

.mainmenu:hover .submenu {
  border: 1px solid #000;
  padding: 50px;
  height: auto;
  top: 100%;
  left: -1px;
  opacity: 1;
  -webkit-transition: all .5s;
}

.mainmenu:hover .hide_line {
  height: 5px;
  width: 100%;
  position: absolute;
  top: 100%;
  right: 0px;
  background: #fff;
  z-index: 1000;
}

<div class="mainmenu">
  Menu
  <div class="hide_line">
  </div>
  <div class="submenu">

    submenu
  </div>
</div>