Выпадающее меню секторы CSS

Я новичок в CSS и HTML. В настоящее время я действительно застрял с выпадающим меню, я искал ответ в течение нескольких часов, и я просто не могу найти ошибку. Если я поставил «position: relative», подменю отображается внутри навигационной панели, но должно отображаться снаружи. Если я оставлю «position: absolute» то оба

  • элементы наложения, но они находятся вне навигационной панели, как я хочу.
    И, конечно, есть дилемма с De hover-эффектом; он должен отображаться только тогда, когда курсор находится на topnav-элементе.
  • HTML
    <body>
    <nav>
    <ul class="topnav">
    <li style="float: right;"><h1>CH</h1></li>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="#">CV</a></li>
    <li><a href="#">Studium</a></li>
    <li><a href="#">Pers&ouml;nlich</a>
    <ul class="subnav">
    <li><a href="umfeld.html">Umfeld</a></li>
    <li><a href="interessen.html">Interessen</a></li>
    <!--<ul class="subsubnav">
    <li><a href="Interessen/sport.html">Sport</a></li>
    <li><a href="Interessen/musik.html">Musik</a></li>
    </ul>
    </li>-->
    </ul></li>
    </ul>
    </nav>

    стиль CSS
    `

    /*nav*/
    nav ul{
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
        width: 100%;
        background: #99ddff;
    }
    nav li {
    	display: inline-block;
    	position: relative;
    }
    nav a {
    	display: block;
        text-decoration: none;
        font-family: "Raleway", Tahoma, sans-serif;
    	color: #4d4d4d;
    	padding: 1em;
    }
    nav a:hover {
    	color: #ffffff;
    }
    .active {background: #90bed5;
    	color: #ffffff;	
    }
    
    /*Dropdown Menu*/
    ul.subnav {
    	display: block;
    	width: auto;
    	height: auto;
    }
    ul.subnav li {
    	display: none;
    	position: relative;
    }
    ul.subnav li a {
    	padding: 0.2em 1em 1em 0;
    	border-bottom: solid white;
    	white-space: nowrap;
    }
    ul.subnav li:hover {
    	display: block;
    	position: absolute;
    }
    
    <!-- begin snippet: js hide: false console: true babel: false -->

    Я был бы очень рад, если бы кто-то мог помочь.
    Заранее большое спасибо!
    Cssie

    1 ответ

    1. Вы хотите скрыть ul.subnav(не только li‘s), и целевой CSS, чтобы показать скрытый subnav при наведении на liэлемент, который имеет вложенный subnav.

      /*nav*/
      nav ul{
      	list-style-type: none;
      	margin: 0;
      	padding: 0;
          width: 100%;
          background: #99ddff;
      }
      nav li {
      	display: inline-block;
      	position: relative;
      }
      nav a {
      	display: block;
          text-decoration: none;
          font-family: "Raleway", Tahoma, sans-serif;
      	color: #4d4d4d;
      	padding: 1em;
      }
      nav a:hover {
      	color: #ffffff;
      }
      .active {background: #90bed5;
      	color: #ffffff;	
      }
      
      /*Dropdown Menu*/
      ul ul {
      	display: none;
      	width: auto;
      	height: auto;
      }
      ul ul li a {
      	padding: 0.2em 1em 1em 0;
      	border-bottom: solid white;
      	white-space: nowrap;
      }
      li:hover > ul {
      	display: block;
      	position: absolute;
      }
         <body>
              <nav>
              <ul class="topnav">
                  <li style="float: right;"><h1>CH</h1></li>
                  <li><a class="active" href="index.html">Home</a></li>
                  <li><a href="#">CV</a></li>
                  <li><a href="#">Studium</a></li>
                  <li><a href="#">Pers&ouml;nlich</a>
                      <ul>
                          <li><a href="umfeld.html">Umfeld</a></li>
                          <li><a href="interessen.html">Interessen</a>
                              <ul>
                                  <li><a href="Interessen/sport.html">Sport</a></li>
                                  <li><a href="Interessen/musik.html">Musik</a></li>
                              </ul>
                           </li>
                      </ul>
                   </li>
              </ul>
              </nav>