HTML和CSS：子菜单显示

我需要一些帮助。我正在研究这款导航胸罩，其中有一个菜单列表，其中一个是Award。 Award具有隐藏的子菜单，如果我将其悬停，则子菜单应该对用户可见。但是，当我悬停在Award上时，它的子菜单对用户不可见。我不是我做错了什么。我在跳，有人可以帮助我，请。HTML和CSS：子菜单显示

这里是我的代码

function openNav() { 
 
    document.getElementById("nav_sidebar").style.width = "142px"; 
 
    document.getElementById("main").style.height = "142px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("nav_sidebar").style.width = "0"; 
 
    document.getElementById("main").style.height= "0"; 
 
}

.sidebar { 
 
    width: 0; 
 
    list-style: none; 
 
    position: absolute; 
 
    height: 100%; 
 
    z-index: 0; 
 
    left: 2px; 
 
    background: #38424f; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 10px; 
 
} 
 

 

 

 
.sidebar ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
.sidebar ul li:hover { 
 
\t background:#f6f6f6 
 
} 
 

 
.sidebar ul { 
 
\t display:none; 
 
\t position: absolute; 
 
\t left: 5%; 
 
\t background: #fff; 
 
\t padding:0 
 
} 
 

 
.sidebar ul li { 
 
    
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
.sidebar li ul:hover 
 
{ 
 
\t display: block; 
 
} 
 

 

 

 

 
.sidebar li a { 
 
    padding: 5px 8px 8px 15px; 
 
    text-decoration: none; 
 
    font-size: 22px; 
 
    color: #4ba6c1; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 

 
.sidebar a:hover, .offcanvas a:focus{ 
 
    color: #ffffff; 
 
} 
 

 
.sidebar .close { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 10px; 
 
    font-size: 20px; 
 
    margin-left: 20px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Admin</title> 
 
     <meta charset="utf-8"> 
 
     <script src="../src//jquery/jquery.min.js"></script> 
 
     <link href="../css/Main.css" rel="stylesheet"> 
 
     <script src="../javascript/Scritp.js"></script> 
 

 
    </head> 
 
    <body> 
 
     
 
     <div class ="side_nave"> 
 
       <label class = "nav" onclick="openNav()">&#9776; Menu</label> 
 
       <div class="main_panel" id = "main"> 
 
        <div class="sidebar" id = "nav_sidebar"> 
 
         <li><a href="javascript:void(0)" class="close" onclick= 
 
           "closeNav()">&times;</a></li> 
 
         <li><a class ="active" href="#">Employee</a></li> 
 
         <li><a href="#">Awards</a> 
 
          <ul> 
 
           <li><a href="#">Menu 1</a></li> 
 
           <li><a href="#">Menu 2</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="#">Certificate</a></li> 
 
         <li><a href="#">Update</a></li> 
 
         <li><a href="#">Sent Email</a></li> 
 
         <li><a href="#">Settings</a></li> 
 
         <li><a href ="../Login.php">Logout</a></li> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     
 
     
 
    </body> 
 

 
</html>

来源

2017-02-25 Ahamed

你瞄准.sidebar li ul:hover显示隐藏ul。这是行不通的，因为你想悬停的ul是隐藏的 - 如果它隐藏，你不能悬停该元素。相反，你需要针对.sidebar li:hover > ul这意味着，当你将鼠标悬停一个li它会显示任何直接孩子ul的

function openNav() { 
 
    document.getElementById("nav_sidebar").style.width = "142px"; 
 
    document.getElementById("main").style.height = "142px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("nav_sidebar").style.width = "0"; 
 
    document.getElementById("main").style.height= "0"; 
 
}

.sidebar { 
 
    width: 0; 
 
    list-style: none; 
 
    position: absolute; 
 
    height: 100%; 
 
    z-index: 0; 
 
    left: 2px; 
 
    background: #38424f; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 10px; 
 
} 
 

 

 

 
.sidebar ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
.sidebar ul li:hover { 
 
\t background:#f6f6f6 
 
} 
 

 
.sidebar ul { 
 
\t display:none; 
 
\t position: absolute; 
 
\t left: 5%; 
 
\t background: #fff; 
 
\t padding:0 
 
} 
 

 
.sidebar ul li { 
 
    
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
.sidebar li:hover > ul 
 
{ 
 
\t display: block; 
 
} 
 

 

 

 

 
.sidebar li a { 
 
    padding: 5px 8px 8px 15px; 
 
    text-decoration: none; 
 
    font-size: 22px; 
 
    color: #4ba6c1; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 

 
.sidebar a:hover, .offcanvas a:focus{ 
 
    color: #ffffff; 
 
} 
 

 
.sidebar .close { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 10px; 
 
    font-size: 20px; 
 
    margin-left: 20px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Admin</title> 
 
     <meta charset="utf-8"> 
 
     <script src="../src//jquery/jquery.min.js"></script> 
 
     <link href="../css/Main.css" rel="stylesheet"> 
 
     <script src="../javascript/Scritp.js"></script> 
 

 
    </head> 
 
    <body> 
 
     
 
     <div class ="side_nave"> 
 
       <label class = "nav" onclick="openNav()">&#9776; Menu</label> 
 
       <div class="main_panel" id = "main"> 
 
        <div class="sidebar" id = "nav_sidebar"> 
 
         <li><a href="javascript:void(0)" class="close" onclick= 
 
           "closeNav()">&times;</a></li> 
 
         <li><a class ="active" href="#">Employee</a></li> 
 
         <li><a href="#">Awards</a> 
 
          <ul> 
 
           <li><a href="#">Menu 1</a></li> 
 
           <li><a href="#">Menu 2</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="#">Certificate</a></li> 
 
         <li><a href="#">Update</a></li> 
 
         <li><a href="#">Sent Email</a></li> 
 
         <li><a href="#">Settings</a></li> 
 
         <li><a href ="../Login.php">Logout</a></li> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     
 
     
 
    </body> 
 

 
</html>

来源

2017-02-25 02:45:35

你甚至可以解决这个问题没有JavaScript：

<li><a href="#" id="awards">Awards</a> 
    <ul> 
     <li><a href="#">Menu 1</a></li> 
     <li><a href="#">Menu 2</a></li> 
    </ul> 
</li>

#awards ul{ 
    display:none; 
} 

#awards:hover ul{ 
    display:block; 
}

来源

2017-02-25 02:38:59 Psi

HTML和CSS：子菜单显示

回答

相关问题