/    Sign up×
Community /Pin to ProfileBookmark

Simple Horizontal Drop Down Menu

Copy linkTweet thisAlerts:
Nov 21.2011

Hello all. I want to make my website have horizontal navigation where if you hover over one of the links, you receive a list of options organized in a nice box directly below it. I have tried googling tutorials and examples but these all have java-script or pictures laced throughout it.

I sat for a little bit trying to theorycraft on how I could get this to work. The first thing my mind went to was hover properties with display:none; and display:block used in conjunction with an unordered list. This sounded right but I did not know how to position everything properly or style the dropdown box.

Any help would be welcome, as I have been coming here often for questions and feel like a mooch. For Christmas I am getting books on all aspects of web design and hopefully the questions will end there. Thanks (:!

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@TLBuZZauthorNov 21.2011 — pwease (:
Copy linkTweet thisAlerts:
@TLBuZZauthorNov 21.2011 — OK I got something somewhat working. I still need to style it and all but yeah, here is the css.

ul {

margin:0;

padding:0;

list-style:none;

width:150px;

border-bottom: 1px solid #FFFFFF;

}

ul li {

position:relative;

}

li ul {

position:absolute;

left:149px;

top:0px;

display:none;

}

ul li a {

display:block;

text-decoration:none;

color:#FFFFFF;

background:#000000;

padding:5px;

border:1px solid #FFFFFF;

border-bottom:0;

}

li:hover ul {

display:block;

}

And the HTML


<ul>

<li><a href="#">Main1</a>

<ul>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub2</a></li>

<li><a href="#">Sub3</a></li>

</ul>

</li>

<li><a href="#">Main2</a></li>

<li><a href="#">Main3</a>

<ul>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub2</a></li>

<li><a href="#">Sub3</a></li>

<li><a href="#">Sub4</a></li>

<li><a href="#">Sub5</a></li>

<li><a href="#">Sub6</a></li>

</ul>

</li>

</ul>

It just flows vertically instead of horizontally, how do I change it to go left to right with the submenus still appearing under their respected main?
Copy linkTweet thisAlerts:
@phatphishNov 24.2011 — It just flows vertically instead of horizontally, how do I change it to go left to right with the submenus still appearing under their respected main?[/QUOTE]

Try adding float: left; to the displayed properties.
×

Success!

Help @TLBuZZ 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 6.3,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...