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;
}
Related
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
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
It's a nav menu with ULs nested in a parent UL. When hovering over an LI of the parent UL (orange in the image below), the nested UL (green in the image below_ should display right below the LI.
Here is the fiddle
.clearer {
clear: both;
}
body {
font-family: sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
position: relative;
vertical-align: baseline;
}
div#header {
background: none repeat scroll 0 0 #101816;
float: left;
height: 56px;
margin: 0;
padding: 0;
width: 320px;
}
div#header-content-container {
height: 100%;
margin: 0;
padding: 0;
width: 320px;
}
a#logo {
background: blue;
background-image: none;
box-shadow: none;
float: left;
height: 38px;
margin: 9px 0 0 6px;
width: 238px;
}
#top-nav-container {
margin: 0 0 0 264px;
position: absolute !important;
}
nav {
background-color: #3e4f4c;
height: 56px;
margin: 0;
width: 56px;
}
nav a#menu_button {
background: #3e4f4c;
display: block;
font-size: 30px;
height: 56px;
margin: 0;
padding: 0;
text-align: center;
width: 56px;
}
nav ul {
background: black repeat-y scroll 0 0 transparent;
border-radius: 0;
box-shadow: none;
display: block;
left: -184px;
list-style: outside none none;
margin: 0;
padding: 0;
position: absolute !important;
width: 240px;
}
nav ul li:first-child {
border-top: medium none;
}
nav ul li:last-child {
border-bottom: medium none;
}
nav ul li:last-child:hover {
background: none repeat scroll 0 0 #3e4f4c;
}
nav ul li {
background: #3e4f4c;
border-bottom: 1px solid #191b1a;
border-top: 1px solid #697774;
display: block;
float: none;
height: 48px;
margin: 0 0 0 10px;
position: relative;
text-align: left;
width: 230px;
}
nav ul li a {
color: #eee;
display: block;
font-size: 13px;
padding: 16px 0 15px 15px;
position: relative;
text-decoration: none;
}
nav ul ul {
background: black repeat-y scroll 0 0 transparent;
border-radius: 0;
box-shadow: none;
display: none;
left: -10px;
list-style: outside none none;
padding: 0;
position: relative !important;
top: 0;
width: 240px;
}
nav ul li:first-child {
border-top: medium none;
}
nav ul ul li {
background: none repeat scroll 0 0 green;
border-bottom: 1px solid red;
display: block;
float: none;
height: 38px;
margin: 0 0 0 10px;
position: relative;
text-align: left;
width: 230px;
}
nav ul ul li a {
color: #fff;
display: block;
padding: 0;
position: relative;
text-decoration: none;
}
nav ul li:hover a.top {
background: #d8a900;
color: black;
}
nav ul li:hover > ul {
display: block;
}
<body>
<div id="header">
<div id="header-content-container"> Logo!
<div id="top-nav-container">
<nav>
<a id="menu_button"></a>
<ul class="top">
<li>
<a class="top" href="/">HOME</a>
</li>
<li>
<a class="top" href="#">SERVICES</a>
<ul>
<li>Item AAAAAAAAA
</li>
<li>Item AAAAAAAAAAAAAAA
</li>
<li>Item AAAAAAA
</li>
<li>Item AAAAAAAAA
</li>
<li>Item AAAAAAAAAAAAAAAA
</li>
<li>Item AAAAAAAAAAA
</li>
<li>Item AAAAAAAAAAAAAA
</li>
</ul>
</li>
<li>
<a class="top" herf="#">LIBRARY</a>
</li>
<li>
<a class="top" href="#">CONTACT</a>
<ul>
<li>Item BBBBBBBBBBBBB
</li>
<li>Item BBBBBBB
</li>
<li>Item BBBB
</li>
</ul>
</li>
<li></li><!-- extra li for styling later -->
</ul>
</nav>
</div>
</div>
</div>
<div class="clearer"></div>
</body>
just add nav ul li { height: auto; } http://jsfiddle.net/cbavfv3j/4/
but i prefer jQuery on click function for this situation :)
The problem is that the height of ht li is always fixed. You need to release it on hover so that inner list could expand properly. For this just add one more rule height: auto:
nav ul li:hover {
height: auto;
}
nav ul li:hover > ul {
display: block;
}
Demo: http://jsfiddle.net/cbavfv3j/5/
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!
I have this CSS dropdown menu. I want the homepage to start on the left side of the page, not on the center. Herein is the style sheet and the div tags for the dropdown navigation bar:
ul, li, html, a
{
margin:0; padding: 0;
}
body
{
text-align: center;
margin: 0 auto;
padding: 0;
font: 65% arial, sans-serif;
}
li
{
list-style-type: none;
}
a
{
text-decoration: none;
color: #034af3;
}
ul#nav
{
width: 22.5em;
height:2.5em;
margin: 2em auto 0;
font-size: 1.5em;
}
ul#nav li
{
position: relative;
float: left;
width: 5em;
height: 2em;
line-height: 2em;
background-color: #465c71;
display: block;
padding: 4px 0px;
border-right: 1px #4e667d solid;
color: #dde4ec;
}
ul#nav li.noBorder
{
border-right: none;
}
ul#nav li:hover
{
background-color: silver;
}
ul#nav li a
{
display: block;
float: left;
width: 100%;
}
ul#nav li ul
{
display: none;
}
ul#nav li:hover ul
{
display: inline;
float: left;
width: 10em;
height: auto;
margin: 0; padding: 0.27em;
font-size: 1em;
text-align: left;
}
ul#nav li:hover ul li
{
width: 100%;
height: 2em;
background-color: Yellow;
border: none;
border-bottom: 1px solid silver;
overflow: hidden;
}
ul#nav li:hover ul li a
{
display: block;
margin: 0; padding: 0 0 0 .3em;
height: 100%;
line-height:2em;
color: #465c71;
}
ul#nav li:hover ul li a:hover
{
background-color: white;
}
<div style="background:#3a4f63;">
<ul id="nav">
<li>Home</li>
<li>Abour
<ul>
<li>About 1</li>
<li>About 2</li>
<li>About 3</li>
<li class="noBorder">About 4</li>
</ul>
</li>
<li>Blog
<ul>
<li>About 1</li>
<li>About 2</li>
<li>About 3</li>
<li class="noBorder">About 4</li>
</ul>
</li>
<li class="noBorder">Contact</li>
</ul>
</div>
Try:
body { text-align: left; }
ul#nav { margin: 2em 0 0; }