【问题标题】：How to create responsive sub menus in CSS3 [duplicate]如何在 CSS3 中创建响应式子菜单 [重复]
【发布时间】：2016-07-20 14:24:04
【问题描述】：

我刚接触 HTML 和 CSS，我想在我的 MY WORK 上创建 2 个子菜单，分别是 Digital Arts 和 Videography。我在 CSS3 方面感到困惑，所以我需要帮助。检查下面的预览和我想要的预期结果。谢谢！

HTML

<!DOCTYPE html>

<html>
<link rel="shortcut icon" href="browserlogo.png">
<title></title>


<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
<nav>
<ul>
<li><img src="logoweb.jpg" id="logo"></li>
    <li><a href='#'>PROFILE</a></li>
    <li><a href='#'>MY WORK</a></li>
    <li><a href='#'>RECORDS</a></li>
    <li><a href='#'>PUBLICATION</a></li>
    <li><a href='#'>CONTACT ME</a></li>
</ul>
</nav>




</body>
</html>

CSS

body{background-color:#000000 ;}

#logo{
position:absolute;
top:0.5%; 
left:3%;
width:185px;
height:59px;
overflow:hidden;
}

#header{
position:absolute;
top:7%; 
left:0%;
width:1600px;
height:600px;
overflow:hidden;
}

*{
    padding: 0;
    margin: 0;
}


nav{
background-color: #233647;
text-align: right;
padding: 25px;
}

nav li {
display: inline-block;
margin: 0px 1px;
padding-top: 1px;
}

nav li a{
color: white;
padding: 25px;
text-decoration: none;
font-family: arial;
}





nav li a:hover{
background-color: white;
color: #233647;
 }

预览

我想要的结果

【问题讨论】：

您需要从嵌套列表开始。然后请做一些（适当的）研究，因为这不是一个新话题。

标签： html css submenu navigationbar

【解决方案1】：

body{background-color:#000000 ;}
#logo{
position:absolute;
top:0.5%; 
left:3%;
width:185px;
height:59px;
overflow:hidden;
}
#header{
position:absolute;
top:7%; 
left:0%;
width:1600px;
height:600px;
overflow:hidden;
}
*{
padding: 0;
margin: 0;
}
nav{
background-color: #233647;
text-align: right;
padding: 25px;
}
nav li {
position:relative;
}
nav  li, ul li {
display: inline-block;
margin: 0px 1px;
padding-top: 1px;
}
nav  li a {
color: white;
padding: 25px;
text-decoration: none;
font-family: arial;
}
nav  li ul li a {
color: white;
padding: 25px;
text-decoration: none;
font-family: arial;
padding:25px ;
display:block;
background:#233647;
text-align:center;
}
nav  li ul li{
width:100%;
}
nav li ul{
display:none;
position:absolute;
top:42px;
background: #233647;
}
nav  li:hover ul{
display:block;
}
nav li a:hover{
background-color: white;
color: #233647;
}

<!DOCTYPE html>
<html>
   <link rel="shortcut icon" href="browserlogo.png">
   <title></title>
   <head>
      <link rel="stylesheet" type="text/css" href="home.css">
   </head>
   <body>
      <nav>
         <ul>
            <li><img src="logoweb.jpg" id="logo"></li>
            <li><a href='#'>PROFILE</a></li>
            <li>
               <a href='#'>MY WORK</a>
               <ul>
                  <li><a href='#'>Digital Arts</a></li>
                  <li><a href='#'>Videography</a></li>
               </ul>
            </li>
            <li><a href='#'>RECORDS</a></li>
            <li><a href='#'>PUBLICATION</a></li>
            <li><a href='#'>CONTACT ME</a></li>
         </ul>
      </nav>
   </body>
</html>

【讨论】：

嘿兄弟，你做到了！但是在我宣布你得到正确答案之前，当用户悬停子菜单时，你如何自动将白色悬停在“我的工作”上？谢谢！

【解决方案2】：

在子菜单中，您只需在 html 文件中编写如下代码

<ul>
    <li>My Work
        <ul id = "ul1">Digital Arts</ul>
        <ul id = "ul2">Videography</ul>
    </li>
</ul>

对于你的 css 文件，请确保将这些子菜单的位置设为绝对

#ul1{
    position: absolute;
}

对 ul2 做同样的事情。也给它一个顶部和左侧，以便它知道站在哪里，这取决于您的页面。让我知道这是否真的有帮助。

【讨论】：

抱歉没用
我的和你选择正确的答案没有什么不同，我只是没有为你写完整的代码