when you hover over the menu item to pop up the frame as in the picture

when you hover over a menu item you need to pop up such a menu - the frame so that it is an angle around the div.

  • Is there a code example? - C.Raf.T

2 answers 2

For example:

* { box-sizing: border-box; } body { background: #fff; } ul { list-style-type: none; padding: 0; margin: 0; } li { position: relative; border: 1px solid transparent; border-radius: 4px; } li a { display: block; width: 100%; height: 100%; padding: .5rem 1rem; position: relative; background: #fff; border-radius: 4px; } .list { border: 1px solid limegreen; border-radius: 4px; max-width: 100px; width: 100%; padding-left: 1rem; } .sub { position: absolute; border: 1px solid #333; left: 90%; background: #fff; top: -1px; border-radius: 4px; z-index: 2; width: 150px; display: none; } .sub li:hover { border: 1px solid transparent; } li:hover a { z-index: 7; } li:hover { border: 1px solid #333; border-right: 1px solid #fff; background: #fff; z-index: 5; } li:hover .sub { display: block; } 
 <ul class="list"> <li> <a href="#">item 1</a> <ul class="sub"> <li><a href="">item 2.1</a> </li> <li><a href="">item 2.2</a></li> <li><a href="">item 2.3</a></li> </ul> </li> <li> <a href="#">item 2</a> <ul class="sub"> <li><a href="">item 2.1</a> </li> <li><a href="">item 2.2</a></li> <li><a href="">item 2.3</a></li> </ul> </li> <li> <a href="#">item 3</a> <ul class="sub"> <li><a href="">item 3.1</a> </li> <li><a href="">item 3.2</a></li> <li><a href="">item 3.3</a></li> </ul> </li> </ul>

  • I tried it locally - it works, thank you a clever and very beautiful girl Elena. - LutiyCsharp
  • Lena - 300r on the phone I will translate - please help me do this frame for a timviewer? Skype poluusver - LutiyCsharp
  • On the timviewer does not work, maybe there is a link? - HamSter

For side menu:

 ul { list-style-type: none; } .submenu { display: none; } .menu { width: 200px; border-left: 2px solid #000000; border-right: 2px solid #000000; background-color: #ffffff; padding: 20px; } .item { display: block; position: relative; padding: 20px; border: 3px solid transparent; } .item:hover { border: 3px solid #00ffe5; border-right: none; border-bottom: 3px solid transparent; border-top-left-radius: 10px; border-bottom-left-radius: 10px; cursor: pointer; } .item:hover::before { content: ""; display: block; position: absolute; left: -3px; bottom: -3px; border: none; border-bottom: 3px solid #00ffe5; border-bottom-left-radius: 10px; width: 100px; height: 10px; } .item:hover::after { content: ""; display: block; position: absolute; right: 9px; bottom: -13px; border: 3px solid #00ffe5; border-left: none; border-bottom: none; border-top-right-radius: 10px; width: 90px; height: 10px; } .submenu > li { padding: 10px; } .item:hover .submenu { display: block; position: absolute; top: -3px; left: 180px; width: 200px; padding-left: 20px; border: 3px solid #00ffe5; border-left: none; border-bottom: none; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background-color: #ffffff; } .submenu::before { content: ""; position: absolute; top: 65px; bottom: 0; left: 5px; right: 0; border: 3px solid #00ffe5; border-top: none; border-right: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } 
 <ul class="menu"> <li class="item"> 1 袩校袧袣孝 袦袝袧挟 <ul class="submenu"> <li>1.1 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>1.2 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>1.3 袩袨袛袩校袧袣孝 袦袝袧挟</li> </ul> </li> <li class="item"> 2 袩校袧袣孝 袦袝袧挟 <ul class="submenu"> <li>2.1 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>2.2 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>2.3 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>2.4 袩袨袛袩校袧袣孝 袦袝袧挟</li> </ul> </li> <li class="item"> 3 袩校袧袣孝 袦袝袧挟 <ul class="submenu"> <li>3.1 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>3.2 袩袨袛袩校袧袣孝 袦袝袧挟</li> </ul> </li> <li class="item"> 4 袩校袧袣孝 袦袝袧挟 <ul class="submenu"> <li>4.1 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>4.2 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>4.3 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>4.4 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>4.5 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>4.6 袩袨袛袩校袧袣孝 袦袝袧挟</li> </ul> </li> <li class="item"> 5 袩校袧袣孝 袦袝袧挟 <ul class="submenu"> <li>5.1 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>5.2 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>5.3 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>5.4 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>5.5 袩袨袛袩校袧袣孝 袦袝袧挟</li> <li>5.3 袩袨袛袩校袧袣孝 袦袝袧挟</li> </ul> </li> </ul>

For blocks:

 .wrapper { display: flex; width: 900px; position: relative; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } .item { /*flex-grow: 1;*/ margin: 0 10px; width: 200px; padding: 20px; line-height: 100px; border: 3px solid #00ffe5; text-align: center; vertical-align: middle; border-radius: 10px; } .item:hover { cursor: pointer; border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .menu { display: none; height: 150px; } .item:hover > .menu { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: center; position: absolute; top: 140px; left: 10px; right: 10px; border: 3px solid #00ffe5; border-top: 3px solid transparent; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding-top: 40px; padding-bottom: 20px; } ul { list-style: none; margin: 0; padding: 0; } .menu > li { display: block; width: 25%; line-height: 20px; padding: 5px; } .block1:hover::after { content: ""; display: block; position: absolute; top: 143px; bottom: -20px; left: 253px; right: 30px; border: 3px solid #00ffe5; border-top: 3px solid transparent; border-right: 3px solid transparent; border-bottom-left-radius: 10px; } .block1:hover > .menu::before { content: ""; display: block; position: absolute; border: 3px solid #00ffe5; top: -20px; bottom: -3px; left: -3px; width: 20px; border-top: none; border-right: none; border-bottom-left-radius: 10px; } .block1:hover > .menu::after { content: ""; display: block; position: absolute; border: 3px solid #00ffe5; top: 20px; bottom: -3px; right: -3px; width: 40px; border-left: none; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .block2:hover::before { content: ""; display: block; position: absolute; top: 143px; bottom: -20px; left: 30px; right: 570px; border: 3px solid #00ffe5; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom-right-radius: 10px; } .block2:hover::after { content: ""; display: block; position: absolute; top: 143px; bottom: -20px; left: 570px; right: 30px; border: 3px solid #00ffe5; border-top: 3px solid transparent; border-right: 3px solid transparent; border-bottom-left-radius: 10px;us: 10px; } .block2:hover > .menu::before { content: ""; display: block; position: absolute; border: 3px solid #00ffe5; top: 20px; bottom: -3px; left: -3px; width: 20px; border-right: none; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .block2:hover > .menu::after { content: ""; display: block; position: absolute; border: 3px solid #00ffe5; top: 20px; bottom: -3px; right: -3px; width: 40px; border-left: none; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .block3:hover::after { content: ""; display: block; position: absolute; top: 143px; bottom: -20px; left: 30px; right: 253px; border: 3px solid #00ffe5; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom-right-radius: 10px; } .block3:hover > .menu::before { content: ""; display: block; position: absolute; border: 3px solid #00ffe5; top: 20px; bottom: -3px; left: -3px; width: 20px; border-right: none; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .block3:hover > .menu::after { content: ""; display: block; position: absolute; border: 3px solid #00ffe5; top: -20px; bottom: -3px; right: -3px; width: 40px; border-left: none; border-top: none; border-bottom-right-radius: 10px; } 
 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css"> </head> <body> <ul class="wrapper"> <li class="item block1"> 袘袥袨袣 1 <ul class="menu"> <li>01 袩校袧袣孝 袦袝袧挟</li> <li>02 袩校袧袣孝 袦袝袧挟</li> <li>03 袩校袧袣孝 袦袝袧挟</li> <li>04 袩校袧袣孝 袦袝袧挟</li> <li>05 袩校袧袣孝 袦袝袧挟</li> <li>06 袩校袧袣孝 袦袝袧挟</li> <li>07 袩校袧袣孝 袦袝袧挟</li> <li>08 袩校袧袣孝 袦袝袧挟</li> <li>09 袩校袧袣孝 袦袝袧挟</li> <li>10 袩校袧袣孝 袦袝袧挟</li> <li>11 袩校袧袣孝 袦袝袧挟</li> <li>12 袩校袧袣孝 袦袝袧挟</li> </ul> </li> <li class="item block2"> 袘袥袨袣 2 <ul class="menu"> <li>01 袩校袧袣孝 袦袝袧挟</li> <li>02 袩校袧袣孝 袦袝袧挟</li> <li>03 袩校袧袣孝 袦袝袧挟</li> <li>04 袩校袧袣孝 袦袝袧挟</li> <li>05 袩校袧袣孝 袦袝袧挟</li> <li>06 袩校袧袣孝 袦袝袧挟</li> <li>07 袩校袧袣孝 袦袝袧挟</li> <li>08 袩校袧袣孝 袦袝袧挟</li> <li>09 袩校袧袣孝 袦袝袧挟</li> </ul> </li> <li class="item block3"> 袘袥袨袣 3 <ul class="menu"> <li>01 袩校袧袣孝 袦袝袧挟</li> <li>02 袩校袧袣孝 袦袝袧挟</li> <li>03 袩校袧袣孝 袦袝袧挟</li> <li>04 袩校袧袣孝 袦袝袧挟</li> <li>05 袩校袧袣孝 袦袝袧挟</li> <li>06 袩校袧袣孝 袦袝袧挟</li> </ul> </li> </ul> </body> </html>

  • And thank you, kind man. - LutiyCsharp