在CSS中将ul设置为另一个的子级_Css_Html_Mobile

在CSS中将ul设置为另一个的子级

css html mobile

在CSS中将ul设置为另一个的子级,css,html,mobile,Css,Html,Mobile,我不是网页设计师。我已经为我创建了一个网站。它几乎没有问题，但总体工作正常。我的最小html是： <!DOCTYPE HTML> <html> <head> <title>Rudra Banerjee</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css" media="all"> footno

我不是网页设计师。我已经为我创建了一个网站。它几乎没有问题，但总体工作正常。我的最小html是：

<!DOCTYPE HTML>
<html>
<head>
<title>Rudra Banerjee</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css" media="all">
footnote {font-size :70%; font-style : italic}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div id="container">
  <div id="header">
  </div>
  <div id="navigation">
    <ul>
      <li>
      <a href="#" style='background-color: #6da8f8'>About Me</a>
      </li>
      <li>
      <a href="work.html">Work</a>
      </li>
      <li>
      <a href="passion.html">Passion</a>
      </li>
    </ul>
  </div>
  <div id="rightnavigation">
    <ul>
      <li>
      <a href="contact.html">Contact Me</a>
      </li>
    </ul>
  </div>
  <div id="content">
    <div class="shadow">
      <img src="images/my_pic.png" alt="MyPic" style="box-shadow:0 10px 10px #000;">
    </div>
    <h2>
      About Me 
    </h2>
    Here goes my about me.
  </div>
</div>
</body>
</html>

这很好，除了在手机上观看时，没有办法将

导航

（即关于我、工作和激情）与

右侧导航

（即联系我，仅在关于我页面中）分开。也就是说，我在手机上获得的导航是：

* About Me
* Work
* Passion

* Contact Me

但是，对我来说，如果我有这样的东西会更好：

* About Me
      * Contact Me
* Work
* Passion

在移动视图中。但我不想改变它在桌面视图中的位置

正如我所说，我对html的术语不是很熟悉，但我想，在这里我需要一个

子项

…将

rightnavigation

定义为

navigation

的子项

我可以在css中定义类似的内容吗？请不要让我参考java等，这些对我来说太重了

回复@NachoDawg因此，现在我的导航应该如下所示：

<div id="container">
  <div id="header">
  </div>
  <div id="navigation">
    <ul>
      <li>
      <a href="#" style='background-color: #6da8f8'>About Me</a>
      <ul class="showOnMobile">
        <li>
        <a href="contact.html">Contact Me</a>
        </li>
      </ul>
      </li>
      <li>
      <a href="work.html">Work</a>
      </li>
      <li>
      <a href="passion.html">Passion</a>
      </li>
    </ul>
  </div>
  <div id="rightnavigation">
    <ul>
      <li>
      <a href="contact.html">Contact Me</a>
      </li>
    </ul>
  </div>

但这也在“关于我”下提供了“联系我”。

听起来你想要“嵌套”列表

然后我们在您的页面底部添加一些新的CSS

//we make sure everything with the class "showOnMobile" is hidden on a normal sized screen
.showOnMobile { 
    display:none;
}


 // This is a media query. it applies the css rules inside the brackets when the condition in the "()" are met. In this instance, the screen must be less than 379 pixles for the rules inside to apply.
@media (max-width: 379px) {
    .showOnMobile{
        display:block;
    }

}

编辑2

我忘了你在手机里也要隐藏正确的“联系我”字样

@media (max-width: 379px) {
    .showOnMobile{
        display:block;
    }
   .rightnavigation{
        display:none;
    }
}

我做了第二次编辑。你能确认你已经添加了我在回复中写的CSS吗？确保在我的第二次编辑中也获得CSS。

<li>
  <a href="#" style='background-color: #6da8f8'>About Me</a>

    <ul class="showOnMobile">
      <li>
          <a href="contact.html">Contact Me</a>
      </li>
    </ul>

  </li>

//we make sure everything with the class "showOnMobile" is hidden on a normal sized screen
.showOnMobile { 
    display:none;
}


 // This is a media query. it applies the css rules inside the brackets when the condition in the "()" are met. In this instance, the screen must be less than 379 pixles for the rules inside to apply.
@media (max-width: 379px) {
    .showOnMobile{
        display:block;
    }

}

@media (max-width: 379px) {
    .showOnMobile{
        display:block;
    }
   .rightnavigation{
        display:none;
    }
}