css html mouseover hover

下面是我的代码，当我悬停在“关于我们”时，下拉菜单下的所有内容都会打开;我如何更改css，以便它只在我mouseover时悬停，这意味着，当我将鼠标悬停在“团队”上时，我应该看到它下面的菜单。css html mouseover hover

另外我怎样才能调整宽度，使它更多地左移。

此外，当下拉菜单长度较长时，它会隐藏在我的内容下方，我希望下拉菜单位于页面正文的上方，而不是隐藏。

在此先感谢大家。

<style> 
ul { 
    font-family: Arial, Verdana; 
font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { display: none; } 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #000061; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { background: #617F8A; } 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
ul li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; } 
</style> 

<body> 
<ul id="menu"> 
    <li><a href=""><b>Home</b></a></li> 
    <li><a href=""><b>About Us</b></a> 
    <ul> 
    <li><a href="">Team</a> 
    <ul> 
     <li><a href="">Profile</a></li> 
     <li><a href="">Board</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
<ul> 
</body>

的jsfiddle：http://jsfiddle.net/LWEry/

来源

2013-03-01 NULL

像这样：

ul { 
    font-family: Arial, Verdana; 
font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { display: none; } 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #000061; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { background: #617F8A; } 
li:hover > ul { 
    display: block; 
    position: absolute; 
    width: 100%; 
} 
ul li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; } 

.sub-menu 
{ 
    position: absolute; 
    top: 0; 
    left: 100%; 
}

http://jsfiddle.net/3xWcu/2/

我改变了一个选择。

FROM

li:hover ul

li:hover > ul

编辑我上面的小提琴。包含Profile和Board li标签的ul添加了一个子菜单类：

<ul class="sub-menu"> 
    <li><a href="">Profile</a></li> 
    <li><a href="">Board</a></li> 
</ul>

并在上面添加了一些CSS。

来源

2013-03-01 16:52:35 97ldave

很酷，但是“团队”子菜单的宽度可以在右侧，而不是在“团队”下面。 – NULL 2013-03-01 16:55:50

更新我上面的答案。我已将课程添加到包含Profile和Board项目的子菜单中。并添加了一些CSS。 – 97ldave 2013-03-01 17:04:51

优秀!!!非常感谢 – NULL 2013-03-01 17:04:57

你的意思是这样吗？ http://jsfiddle.net/3xWcu/

<style> 
ul { 
    font-family: Arial, Verdana; 
font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { display: none; } 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #000061; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { background: #617F8A; } 
li:hover ul { 
    display: block; 
    position: absolute; 
    width: 100%; 
} 
ul li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; } 
</style> 

<body> 
<ul id="menu"> 
    <li><a href=""><b>Home</b></a></li> 
    <li><a href=""><b>About Us</b></a> 
    <ul> 
    <li><a href="">Team</a> 
    <ul> 
     <li><a href="">Profile</a></li> 
     <li><a href="">Board</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
<ul> 
</body>

来源

2013-03-01 16:49:39 martriay

不完全，“团队”有它自己的子菜单。宽度调整是完美的。 – NULL 2013-03-01 16:50:51

css html mouseover hover

回答

相关问题