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：子菜單顯示

回答

相關問題