I've spent more time trying to do this than I'm willing to admit. I just can't seem to figure this out. I'm trying to build something which I believe is very simple. I've got a horizontal menu. And I want to have the submenu be vertical when someone hovers over a given link.
This is what I've got right now at RetirePhoenixArizona.com:
HTML
<nav class="secondary-navigation">
<div class="container">
<ul id="secondary-menu">
<li>Link 1
<ul class="secondary-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
CSS
#secondary-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#secondary-menu li {
float: left;
width: 25%;
}
#secondary-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#secondary-menu li a:hover {
background-color: #111;
}
#secondary-menu ul {
display: none;
}
#secondary-menu li:hover > ul {
position: relative;
display: inline;
width: 200px;
height: 45px;
position: absolute;
margin: 40px 0 0 0;
}
#secondary-menu li:hover > ul li {
float: none;
width: 100%;
}
Remove the float on the li of the submenu
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
width: 25%;
position: relative;
}
a {
display: block;
background: #333;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
ul ul {
display: none;
}
li:hover > ul {
display: block;
position: absolute;
left: 0;
top: 40px;
right: 0;
}
li:hover > ul li {
float: none;
width: 100%;
}
I Just do a responsive horizontal Menu ... here
If you don't need responsive remove all concern container , bar1,bar2,bar3, icon, change, #media screen and (max-width:680px) and the javascript
Related
I have a top navigation bar with 4 options, where I wish that while the fourth option is hovered, a dropdown-menu will display.
The navigation bar is an unordered list, and the dropdown-menu (which should be activated by the fourth option) is a div consisting of 3 links.
The list item that is supposed to display the dropdown-menu while hovered:
<li class="dropdownbutton">Contact</li>
With the help of this line of code:
.dropdownbutton:hover .dropdowncontent {
display:inline-block;
}
And this is the CSS for the dropdown-content:
.dropdowncontent {
display:none;
background-color:#333;
margin-left:272px;
width:90px;
text-align:center;
}
What am I missing?
This should be allright.
ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #333;
}
ul li {
display: inline-block;
position: relative;
text-align: left;
background-color: #333;
}
ul li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 15px;
text-decoration: none;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
font-size: 17px;
font-family: Arial;
}
ul li a:hover {
background-color: #555;
}
ul li ul.dropdown {
min-width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
width: 90px;
}
ul li:hover ul.dropdown {
display: block;
}
ul li ul.dropdown li {
display: block;
}
ul li ul.dropdown li a {
font-size: 14px;
padding: 10px 15px;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact
<ul class="dropdown">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
</ul>
I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
I'm trying to create a navbar that has my page links centered in the middle with a logo aligned to the left side and another link aligned to the right side. With my current setup, what would I have to do to create that?
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
background: #666 url(nav-bg.png) repeat-x 0 0;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #fff;
text-decoration: none;
}
#trans-nav li a:hover {
color: #0F0
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 8em;
background: #63867f;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #666
}
#trans-nav li ul li a:hover {
background: #666
}
#trans-nav {
background-color: #666;
}
<ul id="trans-nav">
<li>Home
</li>
<li>About
</li>
<li>Products
<ul>
<li>Widgets
</li>
<li>Thingamabobs
</li>
<li>Doohickies
</li>
</ul>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
I created a simple example of what you're looking for. Maybe take some pointers from it.
HTML
<header>
<div class="logo">
<span>Logo</span>
</div>
<nav class="nav">
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</nav>
<div class="other">
Link
</div>
</header>
CSS
header {}
a {
color: #FFF;
}
.logo,
.nav,
.other {
float: left;
min-height: 50px;
color: #FFF;
}
.logo {
width: 25%;
background: #333;
}
.logo span {
display: inline-block;
padding: 1em;
}
.nav {
width: 50%;
background: #666;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
display: inline-block;
padding: 1em;
}
.other {
width: 25%;
background: #999;
}
.other a {
display: inline-block;
padding: 1em;
}
#media (max-width: 640px) {
.logo, .nav, .other {
clear: both;
width: 100%;
}
.nav ul li {
display: block;
}
}
JSFiddle example
All nested ULs need to be aligned to the right of their parent LI. Currently the nested ULs seem to be aligning to to the right of a higher level NAV element instead.
Live Code
Link here to fiddle with HTML and problem CSS
HTML
<body>
<div id="header">
<div id="header-content-container"> Logo!
<div id="top-nav-container">
<nav>
<ul>
<li>HOME
</li>
<li>SERVICES
<ul>
<li>Item 00000000
</li>
<li>Item 000000000000000
</li>
<li>Item 000000000000000
</li>
<li>Item 00000000000000
</li>
<li>Item 0000000000000
</li>
<li>Item 000000000000
</li>
<li>Item 000000000
</li>
</ul>
</li>
<li><a herf="#">LIBRARY</a>
</li>
<li>CONTACT
<ul>
<li>Item 0
</li>
<li>Item 00
</li>
<li>Item 000
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="clearer"></div>
</body>
CSS
.clearer {
clear: both;
}
body {
background: none repeat scroll 0 0 red;
font-family:sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
position: relative;
vertical-align: baseline;
}
div#header {
background-color: white;
float: left;
height: 76px;
margin: 0;
padding: 0;
width: 100%;
}
div#header-content-container {
height: 100%;
margin: 0;
width: 768px;
background: black;
}
a#logo {
background: blue;
float: left;
height: 50px;
margin: 12px 0 0 19px;
width: 260px;
}
#top-nav-container {
float: right;
margin: 10px 0 0;
position: relative;
z-index: 9000;
}
nav {
float: right;
margin: 0 9px 0 0;
}
nav ul {
display: inline-table;
list-style: outside none none;
padding: 0;
position: relative;
}
nav ul::after {
clear: both;
content:"";
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: green;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
color: #eee;
display: block;
padding: 16px 15px;
text-decoration: none;
}
nav ul li:hover a {
color: orange;
}
nav ul ul {
background: none repeat scroll 0 0 #343434;
border-radius: 0;
left: auto;
padding: 0;
position: absolute;
right: 0;
top: 100%;
display: none;
}
nav ul ul li {
float: none;
border-top: 1px solid purple;
border-bottom: 1px solid blue;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: yellow;
}
nav ul ul li a:hover {
background: cyan;
}
Problem
Check the updated fiddle.
I have modified the nav ul ul class
nav ul ul { background: none repeat scroll 0 0 #343434;
border-radius: 0;
padding: 0;
position: absolute;
left: -48px;
top: 100%;
display: none;
}
I'm trying to make a basic dropdown menu with css and html. However when I hover on the li that has to drop down, my whole menu comes down with it.
This is my code:
<nav class="icons">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Account
<ul id="login">
<li>Change password</li>
<li>Update details</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
And the CSS
nav {
height: 70px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-left: 5%;
}
ul li {
display: inline-block;
width: 15%;
text-align: center;
line-height: 70px;
}
ul li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul li a:hover {
border-bottom: solid black 1px;
}
ul#login{
margin: 0;
padding: 0;
list-style: none;
}
ul#login li {
display: block;
width: 30%;
text-align: center;
line-height: 70px;
}
ul#login li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul#login li ul li{
width: 20%;
}
ul#login li ul li a {
text-decoration: none;
color: #fff;
font-size: 0.7em;
display: block;
}
ul#login li a:hover {
border-bottom: solid black 1px;
}
I know it's a lot of CSS for such a basic menu but I don't know how to make it more compact.
Can someone please tell me what I'm doing wrong with the dropdown menu?
Add this css
ul li{
position:relative;
}
#login{
position:absolute;
top:71px;
left:0;
}
FIDDLE