如何使一個子導航在HTML

這裏是index.html的代碼：如何使一個子導航在HTML

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="icon" type="image/png" href="SENCOR_Logo.ico"> 
<title>SENCOR</title> 
</head> 
<body> 
<div class="bg-div"> 
    <img class="logo-img" src="SENCOR_Logo.jpg" width="130" height="45"> 
    <nav> 
     <ul> 
      <li><a href="#">Monitoring</a></li> 
      <li><a href="#">Process</a></li> 
      <li><a href="#">Post and Create Email/Excel</a></li> 
      <li><a href="#">Reports</a> 
       <ul> 
        <li><a href="#">Re-Create Email</a></li> 
        <li><a href="#">Merge and Post</a></li> 
        <li><a href="#">Create Excel Report</a></li> 
       </ul> 
       </li> 
       <li> 
      <li><a href="#">Tools</a> 
       <ul> 
        <li><a href="#">Users</a></li> 
        <li><a href="#">Folder Path</a></li> 
        <li><a href="#">Change Folder Path</a></li> 
       </ul> 
       </li> 
      <li><a href="#">Sales</a></li> 
     </ul> 
    </nav> 
</div> 
</body> 
</html>

這裏的style.css文件代碼：

body{ 
    margin: 0; 
    padding: 0; 
    font-size: 15px; 
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif; 
} 
nav { 
    background-color: #333; 
    border: 1px solid #333; 
    color: #fff; 
    display: block; 
    margin: 0; 
    overflow: hidden; 
} 
nav ul{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
nav ul li { 
    margin: 0; 
    display: inline-block; 
    list-style-type: none; 
    transition: all 0.2s; 
} 

nav > ul > li > a { 
    color: #aaa; 
    display: block; 
    line-height: 2em; 
    padding: 0.5em 2em; 
    text-decoration: none; 

} 

nav li > ul{ 
    display : none; 
    margin-top:1px; 
    background-color: #bbb; 

} 

nav li > ul li{ 
    display: block; 
} 

nav li > ul li a { 
    color: #111; 
    display: block; 
    line-height: 2em; 
    padding: 0.5em 2em; 
    text-decoration: none; 
} 

nav li:hover { 
    background-color: #666; 
} 
nav li:hover > ul{ 
    position:absolute; 
    display : block; 
} 

----------- 
.logo-img{ 

    position: fixed; 
    margin: 10px 15px 15px 10px; 
    left: 0; 
    display:inline; 
} 

.bg-div{ 
    background:#333; 
    height: 50px; 
} 

.bg-div nav { 
    position: fixed; 
    display:inline; 
    right: 0; 
}

，所以我想有5子菜單導航欄，如果鼠標指向導航菜單中的子菜單將下降。但我的代碼沒有工作。什麼似乎是問題？

來源

2016-01-29 Emz1402

刪除overflow: hidden;從nav使它的工作。
由於溢出隱藏不允許子菜單顯示在懸停上。

nav { 
    background-color: #333; 
    border: 1px solid #333; 
    color: #fff; 
    display: block; 
    margin: 0; 
// overflow: hidden; // remove this 
}

Working Fiddle

來源

2016-01-29 05:20:39 ketan

謝謝..這項工作。 – Emz1402

刪除overflow該類nav

body{ 
    margin: 0; 
    padding: 0; 
    font-size: 15px; 
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif; 
} 
nav { 
    background-color: #333; 
    border: 1px solid #333; 
    color: #fff; 
    display: block; 
    margin: 0; 

} 
nav ul{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
nav ul li { 
    margin: 0; 
    display: inline-block; 
    list-style-type: none; 
    transition: all 0.2s; 

} 

nav > ul > li > a { 
    color: #aaa; 
    display: block; 
    line-height: 2em; 
    padding: 0.5em 2em; 
    text-decoration: none; 

} 

nav li > ul{ 
     background-color: #bbb; 
    display: none; 
    margin-top: 1px; 
} 

nav li:hover ul{ 
    display: block; 
} 

nav li > ul li a { 
    color: #111; 
    display: block; 
    line-height: 2em; 
    padding: 0.5em 2em; 
    text-decoration: none; 
} 

nav li:hover { 
    background-color: #666; 
} 
nav li:hover > ul{ 
    position:absolute; 
    display : block; 
} 

----------- 
.logo-img{ 

    position: fixed; 
    margin: 10px 15px 15px 10px; 
    left: 0; 
    display:inline; 
} 

.bg-div{ 
    background:#333; 
    height: 50px; 
} 

.bg-div nav { 
    position: fixed; 
    display:inline; 
    right: 0; 
}

https://jsfiddle.net/28ze1wxv/1/

來源

2016-01-29 05:21:39

謝謝..它的工作！ – Emz1402

相同的答案，只是刪除從

隱藏溢出

nav { 
background-color: #333; 
border: 1px solid #333; 
color: #fff; 
display: block; 
margin: 0; 
overflow: hidden; 
}

之後，你的代碼工作，

來源

2016-01-29 05:27:02 mmativ

如何使一個子導航在HTML

回答

相關問題