Making a submenu with a <div> and <ul>/<li>

debugcn 에 게시 Dev

Shedlor

So currently I've got some anchor elements with divs inside of them for my menu bar and I'd like some of them to drop down into a submenu, I can't quite work out how to get it working, here's my HTML:

<ul>
<div id="HeaderContainer">
<div id="title"><a href="/"><img src="images/title_g-u5076.png" alt=""></a></div>
<li><a href="/" class="Home"><div id="Home"><div id="HomeT">HOME</div></div></a></li>
<li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a></li>
<li><a href="/" class="Forum"><div id="Forum"><div id="ForumT">FORUM</div></div></a></li>
<li><a href="/" class="Blog"><div id="Blog"><div id="BlogT">BLOG</div></div></a></li>
<li><a href="/" class="Guilds"><div id="Guilds"><div id="GuildsT">GUILDS</div>  </div></a></li>
<li><a href="/" class="Play"><div id="Play"><div id="PlayT">PLAY NOW</div></div>       </a></li>
</div>
</ul>

There's quite a bit of code for the CSS:

      #HeaderContainer {
      z-index: 3;
      position: absolute;
      top: 28px;
      left: 0px;
      width: 100%;
      height: 65px;
      margin: 0;
      background: url(../images/tri-button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
 }
  #title {
      z-index: 4;
      position: relative;
      width: 252px;
      height: 70px;
      margin: 0 auto;
      top:-10px;
      right: 383px;
  }

  #Home {
      z-index: 4;
      position: relative;
      width: 96px;
      height: 65px;
      margin: 0 auto;
      right: 204px;
      top:-70px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

  #Home:hover {
      width: 96px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

  #Home a{
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 66px;
      vertical-align: middle;
  }

   #HomeT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

    a.Home { 
      text-decoration: none; 
    }

  #Guides {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -135px;
      right: 89px;
      width: 133px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Guides:hover {
      width: 133px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

  #GuidesT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Guides { 
      text-decoration: none; 
  }     

  #Forum {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -200px;
      left: 33px;
      width: 114px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
 }

 #Forum:hover {
      width: 114px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

   #ForumT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Forum {  
      text-decoration: none;
  }


 #Blog {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -265px;
      left: 141px;
      width: 102px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Blog:hover {
      width: 102px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

 #BlogT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

 a.Blog { 
       text-decoration: none; 
    }

 #Guilds {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -330px;
      left: 262px;
      width: 138px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Guilds:hover {
      width: 138px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

   #GuildsT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Guilds { 
     text-decoration: none; 
  }

   #Play {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      width: 168px;
      height: 65px;
      top: -395px;
      left: 415px;
      background: url(../images/button%20texture%20bright.jpg) ;
      background-size: cover; 
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

   #Play:hover {
      width: 168px;
      background: url(../images/button%20overlay%20c.png) no-repeat center, url(../images/button%20texture%20bright.jpg) no-repeat top left;
      background-size: cover;
  }

   #PlayT {
     text-decoration: none;
     font-family: "Cinzel Bold";
     font-size: 18px;
     font-weight: bold;
     color: #000000;
     line-height: 64px;
     vertical-align: middle;
 }

     a.Play { 
       text-decoration: none;
     }

Anthony Carbon

Here bro .. hope this will help ..

ul li {
    position:relative;
    float: left;
    list-style:none;
}
ul li a {
    padding: 10px;
    display:block;
    background:black;
    color:#fff;
}
ul ul ul {
    left: 100%!important;
    top: 0;
}
ul ul, ul li:hover ul ul, ul ul li:hover ul ul, ul ul ul li:hover ul ul {
    display:none;
    position:absolute;
    left:0;
    padding: 0;
}
ul li:hover ul, ul ul li:hover ul, ul ul ul li:hover ul, ul ul ul ul li:hover ul {
    display:block;
}
ul ul li {
    width:100%;
}

<ul>
    <div id="HeaderContainer">
        <li><a href="/" class="Home"><div id="Home"><div id="HomeT">HOME</div></div></a>

            <ul>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                    <ul>
                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                            <ul>
                                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                </li>
                                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                </li>
                                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                    <ul>
                                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                        </li>
                                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                        </li>
                                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                        </li>
                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                        </li>
                    </ul>
                </li>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
            </ul>
        </li>
        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

            <ul>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
            </ul>
        </li>
        <li><a href="/" class="Forum"><div id="Forum"><div id="ForumT">FORUM</div></div></a>

        </li>
        <li><a href="/" class="Blog"><div id="Blog"><div id="BlogT">BLOG</div></div></a>

        </li>
        <li><a href="/" class="Guilds"><div id="Guilds"><div id="GuildsT">GUILDS</div>  </div></a>

        </li>
        <li><a href="/" class="Play"><div id="Play"><div id="PlayT">PLAY NOW</div></div>       </a>

        </li>
    </div>
</ul>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

Making a submenu with a <div> and <ul>/<li>

Making a submenu with a <div> and <ul>/<li>

div 클래스로 div> ul> li 액세스

Change li font in ul?

Php break the ul li

li / ul 테이블 앞에 div b 태그 형식 지정

DIV의 긴 UL 목록, LI 요소로 자동 스크롤

<div> 및 <ul> / <li>로 하위 메뉴 만들기

JQuery : <Div> <UL> 안에 새로운 <Li> 추가

<ul> <li> 선택은 별도의 <div> 채우기

Div ul> li 한 줄 안에 유지 (가로줄)

show third level of ul li on hover of second level of ul li

lastElementChild for selecting the last li in ul?

3 단계 딥 메뉴 넘침 방법 ul> li> ul> li> ul> li

<ul> 높이를 <div>와 같은 높이로 만들고 <li>를 <ul>과 같은 sam 높이로 만듭니다.

텍스트 상자 변경시 div에 ul li을 추가하고 Jquery로 div에서 ul li을 제거하는 방법

VBA : <ul 및 <li 및 <div 및 <span을 사용한 웹 스크래핑

ul li 목록을 div 상단에 정렬 할 수 없습니다.

ul, ul li less에서 CSS로

xpath에 해당하는 CSS 선택기는 무엇입니까? // * [@ id = 'sortable-item_2'] / div / div [2] / ul / li [1] / a / strong

div를 ul로 변환하고 div 내용을 li로 변환 한 후 jquery 누락 된 줄

<ul> <li> 들여 쓰기

Django 양식 오류 : <ul class = "errorlist"> <li> 언어 <ul class = "errorlist"> <li> 값 목록을 입력하세요. </ li> </ ul> </ li> </ ul>

jquery to pure javascript ul li button click

가변 li 너비의 Ul

Center-align <li> in vertical <ul>

Li에서 Child ul 얻기

Li에서 Child ul 얻기

jquery로 ul li 필터링

Anchored links(" ul li a") when hovering

UL LI to HTML menu structure with recursive function