如何在 CSS3 中创建响应式子菜单

Question

我是 HTML 和 CSS 的新手，我想在我的 MY WORK 上创建 2 个子菜单，它们是 数字艺术和摄像。我在 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;
 }

预览

我想要的结果

Answer 1

在子菜单中，您所要做的就是在 html 文件中编写如下代码

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

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

#ul1{
    position: absolute;
}

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

Answer 2

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>

如何在 CSS3 中创建响应式子菜单

How to create responsive sub menus in CSS3

html

css

submenu

navigationbar

HTML

CSS

预览

我想要的结果