/    Sign up×
Community /Pin to ProfileBookmark

drop-down nav help

Copy linkTweet thisAlerts:
Jul 13.2010

I am having problem with a drop-down menu, i created the navigation menu but when you mouse-over the intended drop-down menu, it will display the children horizontally instead of vertically (downward).

below is the html and css i used for the navigation, any help will be appreciated.

the HTML:

[code]<div class=”menu”>
<ul>
<li><a href=”index.html” class=”active”><span>Home</span></a></li>
<li><a href=”about.html”><span>About </span></a></li>
<li><a href=”#”><span>Products</span></a>
<ul class=”dropdwn”>
<li><a href=”#”><span>Home</span></a></li>
<li><a href=”#”><span>Office</span></a></li>
<li><a href=”#”><span>Custom</span></a></li>
</ul>
</li>
<li><a href=”#”><span>Sales</span></a></li>
<li><a href=”contact.html”><span>Contact</span></a></li>
</ul>
</div>[/code]

the CSS:

[QUOTE]

/* menu */
.menu {
padding:15px 0 0 20px;
margin:0;
width:550px;
float:right;
}
.menu ul {
text-align: left;
padding:0;
margin:0;
list-style:none;
border:0;
float:right;
}
.menu ul li {
float:left;
margin:0;
padding:0 5px;
border:0;
}
.menu ul li a {
float:left;
margin:0;
padding:12px 0;
color:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.menu ul li a span {
padding:12px 9px;
background:none;
}
.menu ul li a:hover {
background: url(images/r_menu.gif) no-repeat right;
}
.menu ul li a:hover span {
background:url(images/l_menu.gif) no-repeat left;
}
.menu ul li a.active {
background:url(images/r_menu.gif) no-repeat right;
}
.menu ul li a.active span {
background:url(images/l_menu.gif) no-repeat left;
}
/* drop down menu */

.dropdwn {
text-align: left;
padding:0;
margin:0;
list-style:none;
border:0;
}
.dropdwn li {
float:left;
margin:0;
padding:0 5px;
border:0;
}
.dropdwn li a {
float:left;
margin:0;
padding:12px 0;
color:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.dropdwn li a span {
padding:12px 9px;
background:none;
}
.dropdwn li a:hover {
background: url(images/r_menu.gif) no-repeat right;
}
.dropdwn li a:hover span {
background:url(images/l_menu.gif) no-repeat left;
}
.dropdwn li a.active {
background:url(images/r_menu.gif) no-repeat right;
}
.dropdwn li a.active span {
background:url(images/l_menu.gif) no-repeat left;
}

[/QUOTE]

to post a comment
HTML

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@letmehaveagoJul 13.2010 — Here is some help:

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* menu */
.menu {
padding:15px 0 0 20px;
margin:0;
width:550px;
float:right;
}
.menu ul {
text-align: left;
padding:0;
margin:0;
list-style:none;
border:0;
float:right;
}
.menu ul li {
float:left;
margin:0;
padding:0 5px;
border:0;
}
.menu ul li a {
float:left;
margin:0;
padding:12px 0;
color:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.menu ul li a span {
padding:12px 9px;
background:none;
}
.menu ul li a:hover {
background: url(images/r_menu.gif) no-repeat right;
}
.menu ul li a:hover span {
background:url(images/l_menu.gif) no-repeat left;
}
.menu ul li a.active {
background:url(images/r_menu.gif) no-repeat right;
}
.menu ul li a.active span {
background:url(images/l_menu.gif) no-repeat left;
}
/* drop down menu */

.dropdwn {
text-align: left;
padding:0;
margin:0;
list-style:none;
border:0;
position: absolute; /* take outflow */
display: none /* hide by default */
}

.menu ul li:hover .dropdwn { /* show children dropdwn when hover menu li */
display: block; /* show on hover */
margin-top: 2em; /* shift dropdwn down */
}

.menu .dropdwn li { /* made more specific */
float: none; /* must be none */
margin:0;
padding:0 5px;
border:0;
}
.menu .dropdwn li a { /* made more specific */
float: none; /* must be none*/
margin:0;
padding:12px 0;
color:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.dropdwn li a span {
padding:12px 9px;
background:none;
}
.dropdwn li a:hover {
background: url(images/r_menu.gif) no-repeat right;
}
.dropdwn li a:hover span {
background:url(images/l_menu.gif) no-repeat left;
}
.dropdwn li a.active {
background:url(images/r_menu.gif) no-repeat right;
}
.dropdwn li a.active span {
background:url(images/l_menu.gif) no-repeat left;
}

body { /* for testing */
background: black;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="index.html" class="active"><span>Home</span></a></li>
<li><a href="about.html"><span>About </span></a></li>
<li><a href="#"><span>Products</span></a>
<ul class="dropdwn">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Office</span></a></li>
<li><a href="#"><span>Custom</span></a></li>
</ul>
</li>
<li><a href="#"><span>Sales</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
[/CODE]

Please see my inline comments. Hope you can fix any other problems.
×

Success!

Help @a2j-godfather spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...