Question

我现在正在一个网站上工作，但是我很难让简单的CSS来完成我想做的事情。我正在尝试创建一个下拉菜单，将其悬停在移动设备上时将变得可见。我已经创建并隐藏了下拉菜单，还创建了汉堡图标。

我曾经尝试使用JavaScript，但实际上我讨厌JavaScript。我什至不想提哈哈。在意识到我对JavaScript一无所知之后，我认为我应该只能使用CSS做到这一点。我已经多次重写代码，以为我做了找不到的错字。

@media screen and (max-width:768px){

    .topNav{
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 10vh;
        width: 300px;
        background-color: #001d4c;
        z-index: 1;
        display:none;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transition: transform 0.5s ease-in;
    } 
    .burger{
        display:block;
    }
    .burger:hover .topNav {
        display:flex;

    }

    }

当汉堡被点击时，我希望能够有一个下拉菜单。汉堡的顺便说一句只是3条水平线，没有什么特别的附加条件。但是，当我尝试单击它或将鼠标悬停在它上面时，什么也没发生。

当我将topNav类的显示更改为flex时，它可以完美显示菜单，但是直到将鼠标悬停时才希望显示它。

Answer 1

您可以使用以下示例。.我已经打开了悬停菜单

.nav {
  list-style: none;
  font-weight: bold;
  margin-bottom: 10px;
  float: left;
  width: 100%;
}

.nav li {
  float: left;
  margin-right: 10px;
  position: relative;
}

.nav a {
  display: block;
  padding: 5px;
  color: #fff;
  background-color: #333;
  text-decoration: none;
}

.nav a:hover {
  color: #fff;
  background-color: #6b0c36;
  text-decoration: underline;
}


/*--- DROPDOWN ---*/

.nav ul {
  background-color: #fff;
  background: rgba(255, 255, 255, 0);
  list-style: none;
  position: absolute;
  left: -9999px;
}

.nav ul li {
  padding-top: 1px;
  float: none;
}

.nav ul a {
  white-space: nowrap;
}

.nav li:hover ul {
  left: 0;
}

.nav li:hover a {
  background-color: #6b0c36;
  text-decoration: underline;
}

.nav li:hover ul a {
  text-decoration: none;
}

.nav li:hover ul li a:hover {
  background-color: #333;
}

.nav ul {
  background-color: #fff;
  background: rgba(255, 255, 255, 0);
  list-style: none;
  position: absolute;
  left: -9999px;
}

.nav ul li {
  padding-top: 1px;
  float: none;
}

.nav ul a {
  white-space: nowrap;
}

.nav li:hover ul {
  left: 0;
}

.nav li:hover a {
  background-color: #6b0c36;
  text-decoration: underline;
}

.nav li:hover ul li a:hover {
  background-color: #333;
}

<ul class="nav">

  <li>
    <a href="#">About</a>
    <ul>
      <li><a href="#">The product</a></li>

      <li><a href="#">Meet the team</a></li>
    </ul>
  </li>

</ul>

Answer 2

仅使用CSS的下拉菜单

/* Dropdown container DIV */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown button */
.dropbtn {
    display: inline-block;
    font-weight: 400;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    outline: 0;
    transition: .15s ease-in-out;
}

.dropbtn:hover {
    background-color: #0069d9;
}

/* Dropdown menu (Hidden by Default) */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    padding: 8px 0;
    background: white;
    box-shadow: 0 1px 8px 2px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Links inside the dropdown menu */
.dropdown-menu a {
    color: #000;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
}

/* Change bg-color of dropdown links on hover */
.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Caret */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 6px dashed;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

/* Dropdown menu Header */
.dropdown-menu .dropdown-header {
    color: #777;
    font-size: .8rem;
    padding: 8px 16px;
}

<div class="dropdown">
    <button class="dropbtn">Dropdown
        <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
        <div class="dropdown-header">Dropdown header 1</div>
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">Bootstrap</a>
        <div class="dropdown-header">Dropdown header 2</div>
        <a href="#">Javascript</a>
    </div>
</div>

<p>Mouse over the above button:</p>

参考： Create an Hoverable Dropdown Menu

Answer 3

根据阿德里安（Adrian）对您的问题的评论，在W3学校website上有一个紧凑且符合标准的示例。

我想不仅要链接代码，还要解释它，以使您更好地了解正在发生的事情以及需要实现的目标。

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

该想法是在使用position:属性时利用父子关系。让我们看看CSS是什么（同样，取自W3 Schools示例）：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

父级.dropdown的位置设置为relative，这使它可以相对于其他元素和自己的子级动态地定位自己。

子项.dropdown-content最初设置为display:none，这会将其从DOM中删除（不会呈现）。它的位置设置为absolute。 Absolute定位将相对于最近的父对象relative或窗口对象本身定位内容。这就是为什么您经常看到absolute定位用于将某些内容固定到屏幕顶部或底部的原因。结合具有.dropdown位置的父级relative，这意味着我们的下拉子级将整齐地附加到其父级（因此，为什么HTML在父级内部具有dropdown-content）。

唯一剩下的就是悬停功能。每当用户将鼠标悬停在父下拉菜单上时，子下拉菜单都会更改其display属性，以便显示。

这为您提供了所需的功能和灵活性，而无需使用javascript，也无需特别复杂的CSS解决方案。

Answer 4

这是您下拉菜单的简单CSS

<div class="wrapper">
  <!-- Sidebar Holder -->
    <ul class="list-unstyled components">
      <li class="active">
        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
        <ul class="collapse list-unstyled" id="homeSubmenu">
          <li><a href="#">Home 1</a></li>
          <li><a href="#">Home 2</a></li>
          <li><a href="#">Home 3</a></li>
        </ul>
      </li>
      <li>
        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
        <ul class="collapse list-unstyled" id="pageSubmenu">
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </li>
    </ul>
</div>

CSS部分：

a[data-toggle="collapse"] {
  position: relative;
  border: 1px solid;
  padding: 12px;
}

li {
  margin:25px;
}

a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
  content: '\e259';
  display: block;
  position: absolute;
  right: 0;
  top: 14px;
  font-family: 'Glyphicons Halflings';
  font-size: 0.6em;
}

a[aria-expanded="true"]::before {
  content: '\e260';
}

#pageSubmenu,
#homeSubmenu{
 width: 100px;
 border: 1px solid;
 position: relative;
 top: 9px;
}

这是pen来检查我做了什么。

Answer 5

嗨，威尔，如果您想使用移动下拉菜单，则应使用引导程序。使用引导程序3，因为某些浏览器仍不支持引导程序4。

这是可折叠的固定下拉导航栏的示例代码。希望对您有帮助。

		
    
    //jquery code for hover dropdown in bootstrap;
		//The following jquery is for hover dropdown in the menu if u want the dropdown to be clikable just remove the Jquery
    
    
					$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

<link rel="stylesheet" href="design/bootstrap-3.3.7-dist/css/bootstrap.min.css">

				<script src="design/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
				<script src="design/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        
        <header>
			<nav class="navbar navbar-default navbar-fixed-top">
						<div class="container-fluid">
						<div class="navbar-header">
						
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
						
						
							<a class="navbar-brand" href="salon_home.php">Hair Paradise</a>
						</div>
						
					<div class="navbar-collapse collapse"">
						<ul class="nav navbar-nav navbar-center">
							<li ><a href="salon_home.php"> Home </a></li>
							<li><a href="salon_about.php"> About us </a></li>
							<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href=""> Services <span class="fa fa-caret-down"><span> </a>
									<ul class="dropdown-menu">
										<li><a href="salon_services.php#services">Hair</a></li>
										<li><a  href="salon_services.php#services">Nail</a></li>
										<li><a  href="salon_services.php#services">Wax</a></li>
									</ul>
							</li>	
							<li class="dropdown" >
								<a class="dropdown" data-toggle="dropdown" href="#"> Hairstyles <span class="fa fa-caret-down"></span> </a>
									<ul class="dropdown-menu">
										<li><a href="salon_hairstyle.php#hairstyle">short</a></li>
										<li><a  href="salon_hairstyle.php#hairstyle">medium</a></li>
										<li><a  href="salon_hairstyle.php#hairstyle">long</a></li>
									</ul>
							</li>
							<li ><a href="salon_booking.php"> Book Online </a></li>
							<li class="active"><a href="salon_contact.php"> Contact us </a></li>
						</ul>
						
					</div>
					</div>
				</nav>
			</header>

不要忘记包含引导CSS和jquery以及引导js文件。希望这可以帮助。

Answer 6

此解决方案与给出的答案没有太大不同，希望这甚至是负责任的。

<nav class="template_nav">
<ul class="navigation">
    <li><a href="#" class="mobile" title="Mobile Navigation">Nav |||</a>
    <ul class="main_nav">
        <li><a href="#" title="Menu-Title">Menu</a></li>
        <li><a href="#" title="Menu-Title">Menu</a>
        <ul class="sub_menue">
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        </ul>
        </li>
        <li><a href="#" title="Menu-Title">Menu</a>
        <ul class="sub_menue">
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        </ul>
        </li>
        <li><a href="#" title="Menu-Title">Menu</a>
        <ul class="sub_menue">
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        <li class="sub_menue_link"><a href="#" title="Menu-Title">Menu</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</nav>

如您所见，html非常简单且易于修改。这些类用于显示附加的难易程度不同的风格。

css分为两个简单的部分，一个用于台式机，一个用于移动设备，以支持任何设备，建议对其进行改进以移动设备。

    * {
        margin : 0;
        padding : 0;
    }
    ul,li {
        list-style-type : none;
    }
    a {
        color : #f11df4;
        font-style : italic;
        text-decoration : none;
    }
    a:hover {
        color : #f313f7;
    }
    a:active {
        color : #f13df4;
    }
    a:visited {
        color : #f56cf7;
    }
    @media screen and (min-width:1024px) {
    .template_nav {
        float : left;
        margin-bottom : 2%;
        width : 100%;
        height : 100px;
        background : #000;
    }   
    .navigation{
        padding-top : 30px;
    }
    .mobile {   
        display : none;
    }
    .main_nav li {  
        float : left;   
        width : 150px;  
        padding : 10px;
    }
    .main_nav li ul {   
        display:none;
    } 
    .main_nav li:hover ul { 
        position : relative;    
        z-index : 5;    
        display : block;
    }
    .sub_menue_link {
        background : #000;
        border-bottom : 1px dotted #353535;
    }
    }

    @media screen and (max-width:1023px) {
    .template_nav {
    float : left;
    margin-bottom : 2%;
    width : 100%;
    height : 60px;
    background : #000;
    }   
    .navigation li {
        float : left;
        width : 96%;
        padding : 2%;
        text-align : center;
    }
    .navigation li ul {
        display:none;
    } 
    .navigation li:hover ul {
        position : relative;
        z-index : 5;
        display : block;
    } 
    .main_nav li {
        background : #000;
        border-bottom : 1px dotted #353535;
    }
    .sub_menue, .sub_menue_link {
        display : none;
    }  
    }

以下是一个小提琴，表明此简单的解决方案有效：https://jsfiddle.net/Thorske/327v0jnc/4/

如何仅使用CSS

6 个答案: