Jump to content

Position of navigation menu dropdown

TonyR

By TonyR
in CSS Help

 Share

Recommended Posts

TonyR Member

TonyR

Posted
Posted

I have created a navigation menu bar with a dropdown on one of the links but I am having trouble getting the position correct. Here is my code: http://www.onlineavenue.com/code/

As you can see the dropdown appears within the navigation bar but I would like to get the dropdown menu to align with the bottom of the nav bar. In this page here : http://www.onlineavenue.com/code/index2.html I have added margin-top 8px to the dropdown-content ID which does align the dropdown, but when I hover the mouse over the sub menu links the dropdown disappears before having the chance to select the link.

Any help would be greatly appreciated. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>OnlineAvenue.com</title>
</head>
<body>
<div id="block-wrapper">
	<div id="block-container">
		<div id="menu">
			<div>
				<ul>
					<li><a href="#home">Home</a></li>
					<li><a href="#about">About Us</a></li>
					<li id="dropdown">
					 <a href="javascript:void(0)">Videos <span id="caret"></span></a>
					  <div id="dropdown-content">
					   <a href="#full">Full Videos</a>
					   <a href="#clips">Small Clips</a>
					  </div>
					</li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</div>
		</div><!--menu-->
		<div id="text-container">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula imperdiet euismod. Integer a odio consectetur, sodales mi eu, condimentum dolor. Vivamus a vestibulum nibh. Pellentesque quam leo, viverra non felis quis, congue fermentum libero. Ut finibus, justo a ornare elementum, nulla ex tempor magna, at interdum lacus dui nec tortor. Donec nibh nulla, placerat in purus quis, luctus vestibulum ante.</p>
			<p>Mauris vulputate ultricies lacus, sit amet commodo quam pretium ut. Donec eros ligula, porta ac mauris tristique, iaculis vulputate leo. Donec at quam nec sem mollis dignissim. Nulla sodales euismod ex vel malesuada. Vestibulum sed urna at purus ullamcorper varius. Sed tincidunt massa mattis, vehicula magna sit amet, aliquet quam. In tempor metus ante. Fusce auctor feugiat turpis sed lacinia. Nullam eleifend in odio tincidunt fringilla. Integer venenatis diam velit. Morbi consectetur pulvinar erat, at volutpat enim posuere sed. Vivamus bibendum viverra diam quis faucibus.</p>
			<p>Suspendisse vel ipsum eget arcu semper dignissim. Sed maximus ipsum diam, nec convallis leo egestas tincidunt. Proin in porttitor ante. Praesent sem sapien, mattis sed lectus quis, cursus imperdiet ex. Cras eu leo velit. Nullam cursus id lorem sed consequat. Nullam nibh libero, porttitor eu nisl nec, rutrum aliquet leo. Suspendisse elit neque, tristique aliquet sagittis sed, fermentum vehicula eros. Donec maximus commodo leo, sit amet mollis magna sollicitudin eget. Ut fermentum in risus id eleifend. Ut sed erat id odio tincidunt faucibus. Etiam feugiat sed urna sed ultricies.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a elit in enim tempus lacinia. Aenean in varius augue. Sed porttitor, velit et scelerisque hendrerit, felis tellus ultrices felis, tincidunt congue quam nunc quis nisl. Vestibulum et faucibus ante. Pellentesque semper nibh sed justo dapibus, nec rutrum lectus consectetur. Phasellus maximus ultricies posuere.</p>
		</div><!--text-->
	</div><!--block-container-->
</div><!--block-wrapper-->
</body>
</html>
body {
	padding: 0;
	color: #000;
	font-family: sans-serif;
	font-weight: 400;
	line-height: 1.625;
	background: #fdfbf5;
}
p {
	margin-bottom: 1.5em;
}

#menu {
	max-width: 100%;
	line-height: 1.7em;
	background: linear-gradient(#45959c, #37787e, #295458);
}
#menu ul{
	font-size: .8em;
	font-family: "proxima-nova", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	list-style: none;
	margin: 0 auto;
	margin-top: 0.9em;
	padding-left: 0;
	text-align: center;
	display: inline-block;
}
#menu li {
	float: left;
	position: relative;
}
#menu a {
	color: #fff;
	display: block;
	padding: 0 1.2125em;
	text-decoration: none;
}
#menu li:hover > a {
	color: #fff;
}
#caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-top: -1px;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 5px solid #fff;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  content: "";
}
#dropdown-content {
	display: none;
	position: absolute;
	background: linear-gradient(#45959c, #37787e, #295458);
	text-transform: none;
	min-width: 125px;
	z-index: 1;
}
#dropdown-content a {
	display: block;
	text-align: left;
	margin-top: 8px;
	margin-bottom: 8px;
}
#dropdown-content a:last-child {
	margin-bottom: 10px;
}
#dropdown:hover #dropdown-content {
	display: block;
}
#block-wrapper {
	width: 100%;
}
#block-container {
	max-width: 960px;
	margin: 0 auto;
}
#text-container {
	max-width: 900px;
	margin: 0px 30px;
  	padding-top: 20px;
  	padding-bottom: 1px;
	font-size: 0.875em;
	text-align: justify;
}

 

Link to comment
Share on other sites
requinix Prolific Member

requinix

Posted
Posted

Use less markup.

You can do the entire teal banner thing with just the UL alone. You don't need two more DIVs around it. Make sure you have padding/margins set up so that the LI sits on the bottom of the menu, then the submenu (which is already appearing at the bottom of the LI) will appear to sit on the bottom of the menu as well.

Link to comment
Share on other sites
TonyR Member

TonyR

Posted
  • Author
Posted

Thank you for the reply once again requinix. Whilst working on the nav bar I came across a page on the w3 website which had a nav bar. With some editing I have managed to get the dropdown to align and also add a search bar to the right-hand side.

The problem I am having is that I cannot seem to hide the search bar in mobile view. When in mobile view the search bar stays outside of the menu. What I want is for the search to go inside of the menu and then when clicking the 3-bar icon the menu along with the search bar should appear. Also the Home link in mobile view should not show but after trying everything I have become stuck.

http://www.onlineavenue.com/code

Any help would be much appreciated, thank you.

Link to comment
Share on other sites
requinix Prolific Member

requinix

Posted
Posted

1. You need to restructure your markup so that submenus are child elements of their respective parents. They can't be siblings.
2. Your show/hide rule only affects links. The search box is in a div.

If I edit the rule to show and hide .topmenu > *:not(.icon) then it works as expected for me.

Link to comment
Share on other sites
TonyR Member

TonyR

Posted
  • Author
Posted

Thank you requinix. Just to confirm (as my CSS knowledge is limited), I should change the dropdown-content div to a ul and the links to li's? That way it would create the parent/child relationship?

Also after reading my post I may not have explained myself clearly. I do not want to hide the search bar in mobile view but to display the search bar inside the menu. Currently it is showing the search bar even before clicking the menu tab.

Finally you say that to hide the Home link in mobile view I need to edit the show/hide rule where it currently only effects the links? 

Link to comment
Share on other sites
requinix Prolific Member

requinix

Posted
Posted
15 minutes ago, TonyR said:

Thank you requinix. Just to confirm (as my CSS knowledge is limited), I should change the dropdown-content div to a ul and the links to li's? That way it would create the parent/child relationship?

HTML markup should try to mirror the meaning of the underlying items. A menu is a list of things, therefore a UL is the best tag for it.

The basic structure is typically 

<ul>
  <li><a href="/page-1">Page 1</a></li>
  <li><a href="/page-2">Page 2</a></li>
  <li>
    <a href="/page-3">Page 3</a>
    <ul>
      <li><a href="/page-3/subpage-1">Subpage 1</a></li>
      <li><a href="/page-3/subpage-2">Subpage 2</a></li>
      <li><a href="/page-3/subpage-3">Subpage 3</a></li>
    </ul>
  </li>
</ul>

The UL is list-style-type:none, the LIs are display:inline-block and position:relative, the As are display:block to take up the full LI space, and the LI>ULs are position:absolute at the bottom of their parents and hidden by default. Note how the submenu UL is a child of the parent LI.

For a search box, you keep the UL/LI structure but use the DIV instead of the A.

15 minutes ago, TonyR said:

Finally you say that to hide the Home link in mobile view I need to edit the show/hide rule where it currently only effects the links? 

The Home is already a link, or I think it was, but while your rule was targeting links it was not including the :first-child. That may have been intentional, I don't know, so I was just pointing out that it was happening in case you didn't want it to.

  • Great Answer 1
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.