在 html 中创建一个悬停下拉菜单

Question

I know this question has been asked here before but nothing seems to solve my problem.

I have a traditional menu made with css and I am trying to tweak it slightly to show sub menus on hover. While I have the hover part working (button changes color when hovering), I do not seem to be able to get text to show up on hover. At this point I am worried to touch my code more because I will end up breaking something

here is what I have been able to have so far: css3.style.default:

nav#sidebar {
  width: 280px;
  background: #FFFFFF;
  color: #6a6c70;
  border-right: 1px solid #34373d;
  /* shrinked navbar */
}

nav#sidebar a {
  color: inherit;
  text-decoration: none;
  position: relative;
}

nav#sidebar a[data-toggle="collapse"]::after {
  content: '\f104';
  display: inline-block;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: 'FontAwesome';
  position: absolute;
  top: 50%;
  right: 20px;
}

nav#sidebar a[aria-expanded="true"] {
  background: #34373d;
}

nav#sidebar a[aria-expanded="true"]::after {
  content: '\f107';
}

nav#sidebar a i {
  font-size: 1.2em;
  margin-right: 10px;
  -webkit-transition: none;
  transition: none;
}

nav#sidebar .sidebar-header {
  padding: 30px 20px;
}

nav#sidebar .sidebar-header h1,
nav#sidebar .sidebar-header p {
  margin-bottom: 0;
}

nav#sidebar .sidebar-header h1 {
  color: #8a8d93;
}

nav#sidebar .sidebar-header p {
  font-size: 0.9rem;
}

nav#sidebar span.heading {
  font-weight: 700;
  margin-left: 20px;
  color: #494d53;
  font-size: 1.2rem;
  margin-bottom: 15px;
}
nav#sidebar .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  background: none;
  padding: 4px;
  border: 3px solid #282b2f;
}

nav#sidebar ul {
  max-height: none;
}

nav#sidebar li {
  position: relative;
  /* menu item */
  /* submenu item */
  /* menu item active */
  /* submenu item active */
}

nav#sidebar li a {
  padding: 18px 20px;
  display: block;
  font-weight: 400;
}

nav#sidebar li a:hover {
  background: #B5B0B8;
}

nav#sidebar li a:hover i {
  color: #060808;
}

nav#sidebar li a i {
  margin-right: 20px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding-right: 20px;
  border-right: 1px solid #454649;
}

html:

<ul class="list-unstyled">
                       <li><a href="{% url 'Home2' %}"> <i class="icon-home"></i>{% trans 'Home Dashboard' %} </a></li>
             <br>
             <br>
                <li ><a href="analytics2.html"> <i class="icon-chart"></i>{% trans 'Sales Analytics' %} </a></li>
                <li ><a href="Repanalytics2.html"> <i class="icon-chart"></i>{% trans 'Replenishment Analytics' %} </a></li>
                <li><a href="items2.html"> <i class="icon-chart"></i>{% trans 'Items Analytics' %}</a></li>
                <li><a href="Supplier2.html"> <i class="icon-chart"></i>{% trans 'Supplier Analytics' %}</a></li>
             <br>
             <br>
                <li><a href="SupplierData2.html"> <i class="icon-padnote"></i>{% trans 'Supplier Replenishment' %}</a></li>
                <li><a href="ItemData2.html"> <i class="icon-padnote"></i>{% trans 'Item Replenishment' %}</a></li>
             <br>
             <br>
                <li><a href="supplierbase2.html"> <i class="icon-padnote"></i>{% trans 'Supplier Base' %}</a></li>
                <li><a href="itembase2.html"> <i class="icon-padnote"></i>{% trans 'Item Base' %}</a></li>
             
        </ul>

and the output in templates looks like this:

I am wondering what I need to do different to get that menu to be a hover over menu therefore having all of those buttons hidden unless the user hover over dashboard . Thanks

Answer 1

 .fixedMenu { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 300px; background: #F6C540; } .fixedMenu ul li { list-style: none; position: relative; } .fixedMenu ul li ul{ position: fixed; background: red; top: 0; left: -300px; bottom: 0; width: 300px; box-sizing: border-box; z-index: 99; transition: all 300ms ease-in-out; } .fixedMenu ul li:hover ul { left: 0; transition: all 300ms ease-in-out; } .fixedMenu a { display: block; padding: 20px; color: #000; text-deoration: none; font-size: 18px; z-index: 98; }

 <div class="fixedMenu"> <ul> <li><a href="#">Menu1</a> <ul> <li><a href="#">SubMenu1</a></li> <li><a href="#">SubMenu1</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul> <li><a href="#">SubMenu2</a></li> <li><a href="#">SubMenu2</a></li> </ul></li> </ul> </div>