A dropdown menu for a navbar

问题

I have been trying unsuccessfully to create a drop down menu for my navbar, every single CSS method doesnt seem to provide the desired effect that I require. Currently my HTML looks like....

<!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>

And to compliment that my CSS for the navbar looks like...

.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
}

My question to the point is if I was to make this menu a drop down menu for the "The products" button following a similar style pattern (such as hover colours and background colours) to the rest of the navbar. how would I go about with CSS to achieve this. The new HTML for the css in question being...

<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>

I have tried with so many attempts but have failed to achieve a proper result. Your help will be greatly appreciated. Thanks

回答1:

I am not quite sure if this is what you mean, maybe it needs some style adjustment.

The thing is that your submenu list should be inside the list item of the main menu. Like this:

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

Using that in your code (and optimized the CSS), this is what I came up with: 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; }

Like said, you may need to change some of the styles!

Also check the working JSFiddle Demo

来源：https://stackoverflow.com/questions/18298726/a-dropdown-menu-for-a-navbar

标签

css

drop-down-menu

navigation

uinavigationbar

navbar