0

フライアウト メニュー (垂直ドロップダウン メニュー) に取り組んでいます。メニュー項目にカーソルを合わせると、次のレベルのメニュー項目が 1 つ下に表示されます。それらを引き上げるにはどうすればよいですか？padding-top:-10px; を試しました。 left:150px; を試しました。上:0; 表示ブロック。何も影響していないようです。誰か提案はありますか？

CSS:

nav { float:left;
             width:150px;
             height: 640px;
             font-family:Verdana, sans-serif;
             font-size:14px;
             border:1px solid #cc3333;
             border-radius:20px;
             color: #000000;
             background-image: url(../media/fallLeaves.jpg);
}





           /*common styles for all hyperlinks in the nav section*/
      nav a{text-decoration:none; /*remove underline*/
             color:#000000; }
      /*common styles for ALL list items (all levels) within the nav element - can be overridden by more specific styles*/
      nav li{float:left;
             position:relative;
             width:150px;   /*use a specific width to make each menu item the same width*/
             background-color:#ccffcc;
             font-size:16px;
             text-align:center;  /*main menu list items will be center-aligned*/
             border-right:1px solid #ffffff;
             width:150px; /*I changed this****************************/
             line-height:30px; /*I changed this****************************/
             list-style-type:none; } /*remove bullets*/
      /*common styles for ALL SUBMENU list items*/
      nav ul li ul li{text-align:left; /*text will be left-aligned in the submenus*/
                      padding-left:5px; /*padding to move the text off the border*/
                      padding-top:5px;
                     /* margin-left:150px;*/
                      left:150px;
                      top:0;
                      display:block;
                      margin-right:0;
                      } /*can add a left margin to create a left offset - if desired*/

      /*more specific styles for 1st level submenu (ul nested inside a li) */
      nav ul li ul {visibility:hidden;} /*1st level submenu will not be visible, yet...*/

      /*more specific styles for the 2nd level submenu*/
      nav ul li ul li ul{margin-left:150px; /*offset the 2nd level submenu to the left by the width of the 1st level submenu items*/
                         /*margin-top:-30px;*/ /*offset the 2nd level submenu from the top by the height of the 1st level submenu items so that they align with top of 1st level menu item (relative positioning)*/
                 padding-top:0px;
                 left:150px;
                 top:0;
                 display:block;
                 margin-right:0;}

    /*common style for a hover over any list item in the nav section*/
    nav li:hover{background-color:#ffffcc; } /*change background color when mouse hovers*/

    /*more specific styles: use pseudo classes to make the submenus visible when appropriate*/
    nav ul li:hover ul {visibility:visible;} /*1st level submenu visible when the user hovers over one of the main menu list items*/
    nav ul li:hover ul li ul{visibility:hidden;} /*keep leve 2 submenu not visible when the user is hovering over the first submenu*/
    nav ul li ul li:hover ul{visibility:visible; }/*make the 2nd level submenu visible only when the user hovers over the 1st level submenu*/

    .content{clear:left; /*clear the floats so that the content div displays below the nav menus*/
      margin-top:50px;
      height:300px;}

        nav ul{list-style-type:none;}

       nav ul li a:link{color:#ffffff;}
       nav ul li a:visited{color:#00cccc;}
       nav ul li a:hover{
          background-color:#666666;
          color:#cc0099;
          border:1px dashed #9933ff;}

html:

<nav >
 <!--nav hyperlinks here-->
    <ul>
     <li>
      <a href="#">Project</a>
       <ul>
        <li><a href="index.html">Index</a></li>
       </ul>
     </li>
     <li>
      <a href="#">Exercises</a>
       <ul>
          <li><a href="exercises/favorites.html">My Favorite Songs</a></li>
        <li><a href="exercises/definitions.html">Definitions</a></li>                   <li><a href="exercises/myFirstCSS.html">my First CSS</a></li>
        <li><a href="exercises/image_map.html">County Map</a></li>
        <li><a href="exercises/threeColumn.html">Favorite </a></li>
          <li><a href="exercises/index.html">Re-sizable</a></li>
        <li><a href="exercises/index.html">Re-sizable Flexbox</a></li>
        <li><a href="exercises/index.html">Re-sizable Flexible</a></li>
        <li><a href="exercises/table.html">Table</a></li>
        <li><a href="exercises/form.html">Contact</a></li>
       </ul>
      </li>
      <li>
       <a href="#">Validators</a>
        <ul>
        <li><a href="http://validator.w3.org/#validate_by_input">Validate Input</a></li>
        <li><a href="http://jigsaw.w3.org/css-validator/#validate_by_input">CSS Validator</a></li>
       </ul>
      </li>

     </ul>
    </nav> <!--close nav-->

いくつかの例を見つけましたが、どちらも上と左を使用しているように見えるので、追加しましたが、何も変わらないようでした。 フライアウト ex、フライアウト ex 2

4

1 に答える 1