正确的子菜单只使用HTML + CSS [英] Proper submenu using only HTML+CSS

问题描述

我试图写一个简单的HTML + CSS菜单，没有任何绝对定位或JS。我的问题是关于子菜单，它扩展当前选择的项目或取代它。

 
 code>< ul id =menu> 
< li>第1项< / li> 
< li>文件夹1 
< ul> 
< li>第2项< / li> 
< / ul> 
< / li> 
< li>第3项< / li> 
< / ul> 
  

CSS也是如此：

  #menu，#menu ul {
 border-style：solid; 
 border-width：0px; 
 border-top-width：1px; 
 float：left; 
 list-style：none; 
 margin：0px; 
 padding：0px; 
 width：180px; 
} 
 
 #menu li ul {
 background-color：cyan; 
 display：none; 
职位：亲属; 
正确：-168px; 
 width：auto; 
} 
 
 #menu li：hover ul {
 display：block; 
} 
 
 #menu li {
 border-style：solid; 
 border-width：1px; 
 border-top-width：0px; 
 padding：10px; 
} 
 
 #menu li：hover {
 background-color：lightgrey; 
 font-weight：bold; 
} 
  

我认为子菜单只能在重新定位后影响布局， b $ b不是这里的情况。我有点茫然。

解决方案

使用这种类型的菜单模式，您应该使用位置：相对在子菜单的父 LI 上，并且位置：绝对在 UL 子菜单上。允许子元素出现在布局流的外部，相对于其父元素。

将所有非位置样式放在<$ c $在 LI 中使用c> A -tag并使用 display：block 。如果没有它，你很难在文件夹1上设置样式。

简单的例子： http://jsfiddle.net/Diodeus/jejNy/127/

I'm trying to write a simple HTML+CSS menu without any absolute positioning or JS. My problem is regarding submenus, where it either expand the current selected item or displace it:

The HTML is straightforward:

<ul id="menu">
    <li>Item 1</li>
    <li>Folder 1
    <ul>
        <li>Item 2</li>
    </ul>
    </li>
    <li>Item 3</li>
</ul>

And so is the CSS:

#menu, #menu ul {
    border-style: solid;
    border-width: 0px;
    border-top-width: 1px;
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 180px;
}

#menu li ul {
    background-color: cyan;
    display: none;
    position: relative;
    right: -168px;
    width: auto;
}

#menu li:hover ul {
    display: block;
}

#menu li {
    border-style: solid;
    border-width: 1px;
    border-top-width: 0px;
    padding: 10px;
}

#menu li:hover {
    background-color: lightgrey;
    font-weight: bold;
}

I thought the submenu could only affect the layout after being repositioned, which seems to not be the case here. I'm a bit at a loss.

解决方案

Using this type of menu pattern, you should use position:relative on the parent LI of the sub-menu, and position:absolute on the UL child menu. The allows the child element to appear outside of the layout flow, relative to its parent.

It's also good practice to put all non-position styling on the A-tag inside each LI and use display:block. It would be difficult for you to style the text on "Folder 1" without it.

Simple example: http://jsfiddle.net/Diodeus/jejNy/127/

这篇关于正确的子菜单只使用HTML + CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！