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

时间：2016-07-20 14:24:05

标签： html css submenu navigationbar

我是HTML和CSS的新手，我想在我的工作上创建2个子菜单​​，这些菜单是数字艺术和录像< / strong>即可。我在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;
 }

预览

enter image description here

我想要的结果

enter image description here

2 个答案:

答案 0 :(得分：0)

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>

答案 1 :(得分：-2)

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

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

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

#ul1{
    position: absolute;
}

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

相关问题
最新问题