테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

부트스트랩 네비게이션 바 질문드립니다. 채택완료

헐크매니아 8년 전 조회 4,034
답변 1
목록

아래의 코드는 부트스트랩 공식사이트에 있는 기본 네비게이션 바 입니다.

기본상태의 네비게이션 바는 하부메뉴가 있는 펼침메뉴를 클릭해야지만 하부메뉴가

보이는데 저는 마우스 롤오버만해도 뜨게 하고싶습니다.

어떻게 해야할까요?

</p><pre style="box-sizing: border-box; overflow: auto; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: normal; word-wrap: break-word; border: 0px; border-radius: 4px; white-space: nowrap;"><code class="language-html" data-lang="html" style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px 45px 0px 0px; border-radius: 0px; white-space: pre-wrap; display: inline-block;"><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><nav</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"navbar navbar-default"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
  <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><div</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"container-fluid"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
    <span class="c" style="box-sizing: border-box; color: rgb(153, 153, 153);"><!-- Brand and toggle get grouped for better mobile display --></span>
    <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><div</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"navbar-header"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><button</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">type=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"button"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"navbar-toggle collapsed"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">data-toggle=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"collapse"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">data-target=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#bs-example-navbar-collapse-1"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><span</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"sr-only"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Toggle navigation<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></span></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><span</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"icon-bar"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><span</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"icon-bar"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><span</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"icon-bar"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></button></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"navbar-brand"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Brand<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></span>
    <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></div></span>

    <span class="c" style="box-sizing: border-box; color: rgb(153, 153, 153);"><!-- Collect the nav links, forms, and other content for toggling --></span>
    <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><div</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"collapse navbar-collapse"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">id=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"bs-example-navbar-collapse-1"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><ul</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"nav navbar-nav"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"active"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Link <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><span</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"sr-only"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>(current)<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></span></a></li></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Link<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"dropdown"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
          <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"dropdown-toggle"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">data-toggle=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"dropdown"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">role=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"button"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">aria-expanded=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"false"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Dropdown <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><span</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"caret"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span></a></span>
          <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><ul</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"dropdown-menu"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">role=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"menu"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Action<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Another action<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Something else here<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"divider"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Separated link<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"divider"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>One more separated link<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
          <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></ul></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></li></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></ul></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><form</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"navbar-form navbar-left"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">role=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"search"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><div</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"form-group"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
          <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><input</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">type=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"text"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"form-control"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">placeholder=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"Search"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></div></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><button</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">type=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"submit"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"btn btn-default"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Submit<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></button></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></form></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><ul</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"nav navbar-nav navbar-right"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Link<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"dropdown"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
          <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"dropdown-toggle"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">data-toggle=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"dropdown"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">role=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"button"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">aria-expanded=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"false"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Dropdown <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><span</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"caret"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span></a></span>
          <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><ul</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"dropdown-menu"</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">role=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"menu"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Action<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Another action<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Something else here<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">class=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"divider"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></li></span>
            <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><li><a</span> <span class="na" style="box-sizing: border-box; color: rgb(79, 159, 207);">href=</span><span class="s" style="box-sizing: border-box; color: rgb(212, 73, 80);">"#"</span><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);">></span>Separated link<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></a></li></span>
          <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></ul></span>
        <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></li></span>
      <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></ul></span>
    <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></div></span><span class="c" style="box-sizing: border-box; color: rgb(153, 153, 153);"><!-- /.navbar-collapse --></span>
  <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></div></span><span class="c" style="box-sizing: border-box; color: rgb(153, 153, 153);"><!-- /.container-fluid --></span>
<span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></nav></span></code></pre><p>

#부트스트랩
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
그

이건 따로 스크립트를 짜서 넣어줘야되는데 설명이 복잡하네요 ㅠㅠ

참고로 마우스오버시라는건 모바일에선 안된다는거라 포커스로..

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
헐크매니아
8년 전
방법은 찾았네요.

.dropdown:hover .dropdown-menu {
display: block;
}

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인