自定義CSS導航菜單，沒有下拉

所以我有一個自定義的導航菜單，我試圖做，我似乎無法得到它的工作。我已經包含了我的代碼和我的css代碼。我有3個子菜單，並將鼠標懸停在父項上方，它們應顯示，但它們不是。自定義CSS導航菜單，沒有下拉

任何想法？

HTML代碼：

<div class="menu"> 
    <div class="menu-padder"> 
    <a href="">Item 1</a> 
    <a href="">Item 2</a> 
    <li class="submenu"> 
    <a href="">Subitem 1</a> 
    <a href="">Subitem 2</a> 
    </li> 
    <a href="">Item 3</a> 
    <li class="submenu"> 
    <a href="">Subitem 1</a> 
    <a href="">Subitem 2</a> 
    </li> 
    <a href="">Item 4</a> 
    <li class="submenu"> 
    <a href="">Subitem 1</a> 
    <a href="">Subitem 2</a> 
    </li> 
    <a href="">Item 5</a> 
    </div> 
    </div>

CSS代碼：

.menu { 
    background-image: url('img/menu.jpg'); 
    width: 1000px; 
} 
.menu-padder { 
    padding:5px; 
} 
.menu a { 
    padding:5px; 
    color:white; 
    text-decoration:none; 
    font-weight:bold; 
} 
.menu a:hover { 
    padding:5px; 
    color:yellow; 
    text-decoration:none; 
} 
.submenu { 
    display:none; 
    padding:0px; 
} 
a:hover .submenu { 
    display:block; 
}

來源

2013-12-21 Brad J Trammell

這不是創建一個菜單，你需要改變你的HTML和一些正確的方法改變你的CSS：

DEMO

<div class="menu"> 
    <div class="menu-padder"> 
     <ul> 
      <li><a href="">Item 1</a></li> 
      <li> 
       <a href="">Item 2</a> 
       <ul class="submenu"> 
        <li><<a href="">Subitem 1</a></li> 
        <li><<a href="">Subitem 2</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="">Item 3</a> 
       <ul class="submenu"> 
        <li><<a href="">Subitem 1</a></li> 
        <li><<a href="">Subitem 2</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="">Item 4</a> 
       <ul class="submenu"> 
        <li><<a href="">Subitem 1</a></li> 
        <li><<a href="">Subitem 2</a></li> 
       </ul> 
      </li> 
      <li><a href="">Item 5</a></li> 
     </ul> 
    </div> 
</div>

，但如果你希望你的HTML只使用這個選擇：

a:hover + .submenu, .submenu:hover { 
    display:block; 
}

，改變這種風格：

.submenu { 
    display:none; 
    padding:0px; 
    position:absolute; 
    width:100%; /* or something else */ 
}

DEMO

來源

2013-12-21 20:12:25

你沒有<ul> HTML代碼應該是這樣

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Tutorials</a> 
      <ul> 
       <li><a href="#">Photoshop</a></li> 
       <li><a href="#">Illustrator</a></li> 
       <li><a href="#">Web Design</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Articles</a> 
      <ul> 
       <li><a href="#">Web Design</a></li> 
       <li><a href="#">User Experience</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Inspiration</a></li> 
    </ul> 
</nav>

和像

的CSS

nav ul ul { 
    display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
}

在你的代碼試試這個：

<ul> 
     <li><a href="">Item 1</a></li> 
     <li><a href="">Item 2</a></li> 
     <li class="submenu"> 
     <ul> 
      <li><a href="">Subitem 1</a></li> 
      <li><a href="">Subitem 2</a></li> 
     </ul> 
     </li> 
</ul>

來源

2013-12-21 20:04:00 arturataide

這似乎是HTML5，因爲大多數使用這個網站的訪問者沒有使用符合HTML5的瀏覽器，我試圖避免使用它。我想堅持我現在使用的代碼，我可以使用1格獲得所需的結果並添加.menu：hover.submenu而不是：hover.submenu。你是否告訴我一個子菜單是不可能的，我現在擁有的代碼？ –

使用我給出的css例子和最後一個代碼。我正在JSFiddle製作..稍等片刻 – arturataide

檢查@Mohsen的答案..我已經創建了相同的解決方案 – arturataide

您可以使用CSS相鄰的選擇：

a:hover + .submenu { 
    display:block; 
}

來源

2013-12-21 20:08:12 Infensus

自定義CSS導航菜單，沒有下拉

回答

相關問題