Выпадающее меню для навигатора

Я пытаюсь безуспешно создать раскрывающееся меню для моего навигатора, каждый метод CSS, похоже, не дает желаемого эффекта, который мне нужен. В настоящее время мой HTML выглядит ....Выпадающее меню для навигатора

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled</title> 
</head> 

<!-- Reset Sheet --> 
<link href="reset.css" rel="stylesheet" type="text/css"> 
<!-- Main Sheet --> 
<link href="main.css" rel="stylesheet" type="text/css"> 
<!-- Navigation Menu Sheet --> 
<link href="navbar.css" rel="stylesheet" type="text/css"> 

<body> 
<table id="header"> 
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> 

<!-- Table containing logo --> 
<tr> 
<td colspan="2" valign="middle" height="30" align="center"> 
<a href="http://www.phonesrus.com.au"><img src="logo.JPG" alt="logo" width="570" ></a> 
</td></tr> 

<!-- Table containing NavBar --> 
<tr> 
<td colspan="2" valign="middle" height="55" bgcolor="#300000" align="center"> 
<div class="navbar"> 
<ul class="horizontal">    
    <li><a class="first" href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Products</a></li> 
    <li><a href="#">Environment</a></li> 
    <li><a href="#">Latest News</a></li> 
    <li><a class="last" href="#">Contact Us</a></li> 
</ul> 
</div> 
</td></tr> 
</table> 

</body> 
</html>

И хвалить, что мой CSS для навигационной панели выглядит ...

.navbar ul.horizontal 
{ 
list-style-type:none; 
margin:40 auto; 
width:640px; 
padding:0; 
overflow:hidden; 
} 

.navbar ul.horizontal > li 
{ 
float:left; 
} 

.navbar ul.horizontal li a 
{ 
display: block; 
text-decoration:none; 
text-align:center; 
padding:22px 20px 22px 20px; 
font-family:Arial; 
font-size:8pt; 
font-weight:bold; 
color:#FFFFFF; 
text-transform:uppercase; 
border-right:1px solid #607987; 
background-color:#300000; 
letter-spacing:.08em 
} 

.navbar ul.horizontal li a:hover 
{ 
background-color:#680000; 
color:#a2becf 
} 

.navbar ul.horizontal li a.first 
{ 
border-left:0 
} 

.navbar ul.horizontal li a.last 
{ 
border-right:0 
}

Мой вопрос к точке, если я должен был сделать это меню выпадающее меню для кнопки «Продукты», следуя аналогичному шаблону стиля (например, цвета наведения и цвета фона) для остальной части навигационной панели. как бы я пошел с CSS для этого. Новый HTML для CSS в вопросе существа ...

<div class="navbar"> 
<ul class="horizontal">    
    <li><a class="first" href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Products</a></li> 
     <ul> 
      <li><a href="#">Apple</a></li> 
      <li><a href="#">HTC</a></li> 
      <li><a href="#">Nokia</a></li> 
      <li><a href="#">Samsung</a></li> 
     </ul> 
    <li><a href="#">Environment</a></li> 
    <li><a href="#">Latest News</a></li> 
    <li><a class="last" href="#">Contact Us</a></li> 
</ul> 
</div>

Я попытался так много попыток, но не смогли достичь должного результата. Ваша помощь будет принята с благодарностью. Спасибо

источник

2013-08-18 Wishhasad Somawansa

Я не совсем уверен, если это то, что вы имеете в виду, возможно, ему нужна некоторая корректировка стиля.

Дело в том, что ваш список подменю должен находиться внутри элемента списка главного меню. Как это:

<ul> 
    <li>Item 
     <ul> 
      <li>...</li> 
     </ul> 
    </li> 
</ul>

Используя это в коде (и оптимизировали CSS), это то, что я придумал: HTML

<div class="navbar"> 
<ul class="horizontal">    
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Products</a> 
     <ul> 
      <li><a href="#">Apple</a></li> 
      <li><a href="#">HTC</a></li> 
      <li><a href="#">Nokia</a></li> 
      <li><a href="#">Samsung</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Environment</a></li> 
    <li><a href="#">Latest News</a></li> 
    <li><a href="#">Contact Us</a></li> 
</ul> 
</div>

CSS:

.horizontal { 
    list-style-type:none; 
    margin:40 auto; 
    width:640px; 
    padding:0; 
    overflow:hidden; 
} 
.horizontal > li { 
    float:left; 
} 
.horizontal li ul { 
    display: none; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    position: relative; 
    width: 100%; 
} 
.horizontal li:hover ul { 
    display: block; 
} 
.horizontal li a { 
    display: block; 
    text-decoration:none; 
    text-align:center; 
    padding:22px 10px; 
    font-family:Arial; 
    font-size:8pt; 
    font-weight:bold; 
    color:#FFFFFF; 
    text-transform:uppercase; 
    border-right:1px solid #607987; 
    background-color:#300000; 
    letter-spacing:.08em 
} 

.horizontal li a:hover { 
    background-color:#680000; 
    color:#a2becf 
} 

.horizontal li:first-child a { border-left:0; } 
.horizontal li:last-child a { border-right:0; }

Как сказал , вам может потребоваться изменить некоторые стили!

Также проверьте рабочую JSFiddle Demo

источник

2013-08-18 12:05:12 LinkinTED

Thankyou так много, я пытался получить этот результат, не увенчалась успехом. Еще раз Спасибо большое за вашу помощь –

Ваш прием. Пожалуйста, отметьте ответ в качестве решения («v» на legt), который вам подходит. – LinkinTED

Выпадающее меню для навигатора

ответ

Смежные вопросы