html ' s dropdown menu



  • I wanted to make a menu for html constituentss to hover .button-menu List disclosed But as soon as you remove the cadet, the list disappears again.

    <div class="nav-wp">
        <div class="button-menu">Menu</div>
        <ul class="nav">
            <li><a href="#">about</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>
    

    Introduction .button-menu List .nav I'll be there. opacity:1; z-index:1;But right after you remove the cadet .button-menu The list is missing.



  •  $(document).ready(function() {
       $(".jq").click(function() {
         $(".drop").hide();
         $(".jq").hide();
       });
       $(".li_menu").click(function() {
         $(".drop").show();
         $(".jq").show();
       });
     });
    

    $(document).ready(function() {
    $(".jq").click(function() {
    $(".drop_2").hide();
    $(".jq").hide();
    });
    $(".li_menu_2").click(function() {
    $(".drop_2").show();
    $(".jq").show();
    });
    });

     ul,
    a {
    list-style-type: none;
    text-decoration: none;
    }
    menu>ul {
    position: relative;
    width: 200px;
    background: #ccc;
    }
    li {
    display: block;
    height: 30px;
    line-height: 30px;
    }
    menu ul>li>ul {
    width: 250px;
    position: absolute;
    top: 0px;
    left: 220px;
    background: #c01;
    display: none;
    z-index: 10;
    }
    menu ul li>ul:after {
    content: '';
    border: 8px solid transparent;
    border-right: 8px solid #c01;
    position: absolute;
    left: -15px;
    top: 13px;
    }
    .li_menu {
    position: relative;
    }
    .li_menu:before {
    content: '';
    border: 8px solid transparent;
    border-left: 8px solid #fafafa;
    position: absolute;
    right: -5px;
    top: 40%;
    }
    menu ul>li>ul>li {
    width: 90%;
    text-align: center;
    }
    a {
    cursor: pointer;
    color: #fafafa;
    }
    a:hover {
    text-decoration: underline;
    }
    .jq {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    background: transparent;
    }
    .drop_2 {
    display: none;
    background: lightblue;
    position: absolute;
    left: 270px;
    z-index: 9;
    }
    .drop_2:after {
    content: '';
    border: 8px solid transparent;
    border-right: 8px solid lightblue;
    position: absolute;
    left: -15px;
    top: 10px;
    }
    .li_menu_2 {
    position: relative;
    }
    .li_menu_2:before {
    content: '';
    border: 8px solid transparent;
    border-left: 8px solid #fafafa;
    position: absolute;
    right: -27px;
    top: 30%;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <menu>
    <ul>
    <li><a href="">Главная</a>
    </li>
    <li><a href="">Гостевая</a>
    </li>
    <li class="li_menu"><a>Уроки</a>
    <ul class="drop">
    <li><a href="">Живопись</a>
    </li>
    <li class="li_menu_2"><a>Фотошоп</a>
    <ul class="drop_2">
    <li><a href="">Уроки</a>
    </li>
    <li><a href="">Основы</a>
    </li>
    <li><a href="">Функиции</a>
    </li>
    <li><a href="">Продвинутые</a>
    </li>
    </ul>
    </li>
    <li><a href="">Корел Драв</a>
    </li>
    <li><a href="">Верстка</a>
    </li>
    <li><a href="">Моё превью</a>
    </li>
    </ul>
    </li>
    <li><a href="">О нас</a>
    </li>
    </ul>
    </menu>
    <div class="jq"></div>

    Here's an example of the menu on jquery, of course, but for example, it'll be a two-way menu.


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2