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

回答

相關問題