Блог

Как получить подменю в Css и HTML, как на моей картинке.. Я пытался и искал в Google свое требование, но не получил никакого решения. мое требование заключается в том, что когда я наведу курсор мыши на любое меню, его подменю должно отображаться только сбоку страницы, как на моем рисунке выше. Возможно, я не гуглил какие-либо конкретные ключевые слова, которые вы, люди, можете знать

Кто-нибудь понял мою идею … застрял с этим последние пару дней

Часть кода, который я пробовал

HTML

 div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<ul><li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>

#menu {
    width: 550px;
    height: 35px;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
    border-radius: 8px;
}

#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

#menu li { 
display: inline; 
padding: 20px; 
}

#menu a {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
}

#menu a:hover {
    color: #F90;
    background-color: #FFF;
}
  

начало дня вот так

ДЕМОНСТРАЦИЯ Codepen

HTML

 <ul class="menu">
            <li><a href="">some text</a></li>
            <li><a href="">some text</a>
                <ul>
                    <li><a href="">some textsome textо</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                </ul>
            </li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
        </ul>
  

Надеюсь, это то, чего вы пытаетесь достичь..

     <ul class="main">
   <li>
      Explore
      <ul class="sub">
         <li>Sub menu 1</li>
         <li>Sub menu 2</li>
      </ul>
   </li>
   <li>More
      <ul class="sub">
         <li>Sub menu 3</li>
         <li>Sub menu 4</li>
      </ul>
   </li>
</ul>
  

CSS:

 ul,li,ol{
    list-style-type:none;
    margin:0;padding:0;
}
li{
    float:left;
    margin:10px;
    width:100px;
    border:1px solid red;
}

ul.main li ul.sub li{
    display:none;
}
ul.main li:hover ul.sub li{
    display:block;
    float:left;
}

ul.sub{
    position: absolute;
    border-top: 10px solid red;
}
  

Демонстрация скрипки