Drop Down Menu in CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-27 10:32 出处：网络

I want to make a drop down menu for my wordpress blog. But there is a problem. I want when the user puts their mouse over the <ul></ul>, the sub-category to appear.

相关专题：css wordpress

I want to make a drop down menu for my wordpress blog.

But there is a problem.

I want when the user puts their mouse over the <ul></ul>, the sub-category to appear.

I want to solve the problem with CSS only.

Notice: I've changed the direction of the page because I am using an Arabic language.

#menu-body {
 border:dotted 1px #FFFFFF;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 border-radius: 7px;
 background: #2C2C2C;
 height:35px;
 width:inherit;
 color:#fff;
 padding-right:15px;
 padding-top:0px;
 padding-bottom:0px;
 font-family:Tahoma , Arial;
 font-size:13px;

}
#menu-body ul  {
 float:right;
 list-style:none;
 margin:0px 0px 0px 0px;
 padding:10px;
 cursor:pointer; position:relative;

}

#menu-body ul:hover {
background-color:#FFFFFF;
color:#2C2C2C;
}
#menu-body ul a {
 text-decoration:none;
 color:#fff; 
 outline:0;

}

.dropdown_1column { margin:4px auto;
 position:absolute;
 left:-999em; /* Hides the drop down */
 text-align:right;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background开发者_如何学Go */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;display:block;
 border-radius: 0px 5px 5px 5px;}
 .dropdown_1column {width: 140px;}

#menu-body ul:hover a {
color:#000;}

<div id="menu-body"><ul><a href="#">Home</a></ul>
<ul><a href="#">Category 1</a></ul>
<ul><a href="#">Category 2</a></ul>

<ul><a href="#">Category 3</a>
<li>Sub-Cat 1</li>
<li>Sub-Cat 2</li>
<li>Sub-Cat 3</li></ul>

<ul><a href="#">Category 4</a></ul></div>

Try with this css & html :

body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar * {
    transition: 0.3s;
}


.navbar a {
  float: right;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

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

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">Category 1</a>
  <div class="dropdown">
    <button class="dropbtn">Category 2 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#news">Category 3</a>
  <a href="#news">Category 4</a>
</div>

</body>
</html>

You can have more exemple on https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp