I am trying to figure out why the third level of my drop down menu is not stretching to the width of the text that is contained within it. So far the text just automatically indents to the next line but all the other li's do not do this and are on a single line. Can someone help me find out why this is happening? Thank you!
here is the example I have made so far: http://themedwebdesign.com/salmon/
here is the html
<header>
<div class="container clearfix">
<div id="logo"><img src="./img/salmon-logo.png" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>Pages
<ul>
<li>About</li>
<li>Services</li>
<li>Meet the Team</li>
</ul>
</li>
<li>Features
<ul>
<li>Feature</li>
<li>Level 3
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio
<li>Blog
<ul>
<li>Single</li>
<li>Large</li>
<li>Medium</li>
<li>Small</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
and here is the css, I apologize its made using sass. If the compiled css file is needed then I will post it.
nav {
float: right;
ul {
list-style: none;
position: relative;
display: inline-block;
margin: 0;
li {
float: left;
text-transform: uppercase;
font-weight: 300;
a {
text-decoration: none;
color: inherit;
padding: 15px 25px;
display: block;
}
&:hover {
color: $colorSite;
}
&:hover > ul {
display: block;
}
}
&:after {
content: "";
clear: both;
display: block;
}
ul {
position: absolute;
top: 100%;
display: none;
padding: 0;
margin: 0;
border: 1px solid $colorSite;
li {
float: none;
position: relative;
a {
color: $colorDark;
text-decoration: none;
display: block;
padding: 15px 25px;
background-color: #fff;
&:hover {
color: #fff;
background-color: $colorSite;
}
}
}
ul {
position: absolute;
left: 100%;
top: 0;
}
}
}
}
If you want to stretch and don't want the 2nd line, you can simply do this in your css
header nav ul ul li a { white-space: nowrap; }
Just make width: 100%; under css header nav ul ul ul
white-space: nowrap; will prevent the text from wrapping.
header nav ul ul li {
float: none;
position: relative;
white-space: nowrap;
}
Related
Hi I can't seem to be removing the background color after shifting elements. While the elements have moved and they are working perfectly but every timeenter image description here I am clicking on the sign in and sign up, the original space seems to show up as the background color.
HTML code:
<nav>
<ul>
<li><a class="active" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li>Blog</li>
<li>Categories
<ul>
<li>Romance</li>
<li>Paranormal</li>
<li>Thriller</li>
<li>Horror</li>
</ul>
</li>
<li>Reviews
<ul>
<li>Star Rating 1</li>
<li>Star Rating 2</li>
<li>Star Rating 3</li>
<li>Star Rating 4</li>
<li>Star Rating 5</li>
</ul>
</li>
<li>Contest
<ul>
<li>Giveaways</li>
<li>Free Books for Reviews</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>For Authors</li>
<li>For Bloggers</li>
</ul>
</li>
<li><i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</li>
<li><i class="fa fa-fw fa-user"></i>Sign In</li>
</ul>
</nav>
CSS code:
/* navigation top menu */
nav{
position: relative;
top:0;
left:0;
padding: 5px 0 0 0;
width: 100%;
font-size: 1em;
}
.active
{
background-color: #F24F1B;
color: white;
}
nav::after{
content:'';
display: block;
clear:both;
}
nav ul{
list-style: none;
margin:0;
padding:0;
position: relative;
right: 200px;
}
nav ul li:hover {
background-color: #F24F1B;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
display: inline-block;
color:black;
padding: 10px 20px;
text-decoration: none;
width: 125px;
position: relative;
}
nav ul li a:visited {
color:black;
}
nav ul li a .active{
color: white;
}
nav ul li a:hover {
background-color: #F24F1B;
color: white;
}
nav ul ul {
position: relative;
top: 100%;
background-color: #F24F1B;
display: none;
position: relative;
right: 0px;
}
nav ul ul li {
position: relative;
border-bottom: 2px solid rgb(128, 104, 104);
}
nav ul ul ul {
left: 100%;
top: 0px;
}
/* top level */
nav>ul {
padding-left: 200px;
color:white;
}
nav>ul>li {
float: left;
}
nav>ul>li>a {
width: auto;
padding: 10px 20px 15px 20px;
}
.signed {
position: relative;
left: 300px;
}
Your issue is because your background-color is on the li and not on a.signed but you are moving your a.signed with left: 300px; and not the li.
If you put the class .signed to the list item instead of the link, it will work as you'd expected.
Here's the code with the fix: https://codepen.io/MateoStabio/pen/rNWeYXd
I do recommend looking into restructuring your navigation entirely so that the right nav doesn't jump when you hover items on the left navigation.
.signed {
background-color: transparent;
position: relative;
left: 300px;
}
Try This one.
I'm trying to create a basic drop down menu. I'm having issues with the alignment. How can I get sub menu items to be directly underneath one another? For example, I am trying to get twitter, instagram, and facebook underneath "Social".
Thanks.
https://jsfiddle.net/xalxnder/ostaqgyk/
HTML
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
CSS
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline;
padding-right: 10px;
}
.main-nav .sub {
color: pink;
float: none;
z-index: -200;
}
//** .sub{display: none;
}
.dropdown:hover > .sub {
display: block;
position: absolute;
}
Here's the basics of it.
JSFiddle
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
ul {
list-style-type: none;
color: white;
}
.main-nav >li {
display: inline-block;
position: relative;
padding-right: 10px;
}
.sub {
position: absolute;
top: 100%;
left: 0;
color: pink;
/* display:none */ /* disabled for demo */
}
.dropdown:hover .sub {
display:block;
}
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
Since block-level elements take up their own line, this rule should hold you:
.sub li {
display: block;
}
Add to .main-nav .sub:
position: absolute;
padding: 0;
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline-block;
padding-right: 10px;
}
.main-nav .sub {
position: absolute;
padding: 0;
color: pink;
float: none;
z-index: -200;
}
.sub li {
display: block;
}
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
I am trying to make navigation bar. I am applying padding around nav iteams but it is falling out of its parent nav tag. How to deal with this kind of problem. Thanks
HTML
<header>
<div class="wrap">
<img src="logo.jpg">
<nav>
<ul>
<li>My Link 1</li>
<li>My Link 2</li>
<li>My Link 3</li>
<li>My Link 4</li>
</ul>
</nav>
</div>
</header>
CSS
#media screen and (max-width: 850px) {
* {
box-sizing: border-box;
}
.logo {
display: block;
}
nav {
background-color: aliceblue;
float: none;
display: block;
}
nav li {
/* padding: 5px; */
display: block;
width: 100%;
}
nav li a {
background-color: #999;
padding: 30px;
width: 100%;
height: 100%;
}
nav ul {
width: 100%;
}
}
add display block to anchor tag
Check fiddle
nav li a {
background-color: #999;
padding: 30px;
width: 100%;
height: 100%;
display: block;
}
I think what you're looking for is this:
#media screen and (max-width: 850px) {
* {
box-sizing: border-box;
}
.logo {
display: block;
}
nav {
background-color: aliceblue;
float: none;
display: block;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
background-color: #999;
padding: 30px;
display: block;
}
nav ul {
width: 100%;
}
}
<header>
<div class="wrap">
<img src="logo.jpg">
<nav>
<ul>
<li>My Link 1</li>
<li>My Link 2</li>
<li>My Link 3</li>
<li>My Link 4</li>
</ul>
</nav>
</div>
</header>
I've been trying to work on this with no success, for some reason the sub list is just not showing up! I've tried: nav > ul > li:hover > ul{} but that seems to break functionality of the code. I'm sure this is a pretty simple issue I'm having.
nav > ul {
list-style: none;
}
nav > ul > li {
padding: 20px;
float: left;
}
nav > ul > li {
background-color: #fff;
}
nav > ul > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav > ul > ul > li {
float: none;
width: 200px;
}
nav > ul > li:hover {
color: #4169E1;
display: block;
visibility: visible;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure</li>
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
<li>Mad</li>
</ul>
</nav>
Simplify your selectors (nav ul ul) is fine
Make the parent li's position: relative so that the position: absolute dropdowns are positioned in relation to them. Use an appropriate top value
In your example, visibility: visible is not doing anything. display: none and display: block are used to hide / show
Nest your lists properly. This is the correct way:
<ul>
<li>Top Menu Item
<ul>
<li>Sub-menu Item</li>
</ul>
</li>
</ul>
Read more: Nested lists on w3.org
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
padding: 20px;
float: left;
background-color: #fff;
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav ul ul li {
width: 200px;
background: #FFF;
padding: 10px;
}
nav ul li:hover ul {
color: #4169E1;
display: block;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
</ul>
</li>
<li>Secure
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
</nav>
To Point out one of the Mistakes you have
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure
<ul> **--> this should be inside li**
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
and your css
add this
nav > ul > li:hover > ul{
display: block;
opacity: 1;
visibility: visible;
}
check the fiddle
http://jsfiddle.net/ruchan/4fk6y2wu/
Use some more css3 power!
See Demo here
See Fullscreen
<nav>
<ul id="menu">
<li class="category top_level"><a class="selected" href="#">Home</a></li>
<li class="category top_level">About</li>
<li class="category top_level">Secure
<ul class="dropdown">
<li class="item">How secure are we?</li>
<li class="item">We are not secure enough!!</li>
</ul>
</li>
<li class="category top_level last">Mad
</li>
</ul>
</nav>
css
body {
font-family:'Montserrat', sans-serif;
background:#000;
}
ul {
list-style-type: none;
}
#menu a {
text-decoration: none;
white-space: nowrap;
color: #222;
background-color: #fff;
}
#menu li.top_level {
vertical-align: top;
zoom: 1;
display: block;
float: left;
width: 16.5%;
margin-right: 0.2%;
position: relative;
text-align:center;
}
#menu li.last {
margin-right: 0px;
}
#menu .dropdown {
float: none;
z-index: 100;
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
line-height:2em;
display:block;
padding:.6em;
border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
background:#007dac;
-webkit-transition: background-color 940ms;
-moz-transition: background-color 940ms;
}
#menu a.selected {
color: #ffffff;
background-color: #007dac;
}
Im trying to do a sub-sub menu in a webpage. I tried following the help in this post: how do I make a sub sub menu with css? but to be honest i didnt understand what code i had to add in each class and when i tried it didnt show anything. Here is the code of the menu:
<div class="l7menu">
<ul class="dpdown">
<li class="mainlist">Hombres
<ul class="sub_menu">
Prueba
Here goes the sub-submenu
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
</ul>
</li>
</ul>
</div>
Also the CSS of the classes are these ones (The sub_menu and l7menu class dont have any style applied):
.mainlist {
border-bottom: 2px solid #EAD704;
background: none;
margin-left: 2px !important;
}
.mainlist:hover {
color: #EAD704 !important;
}
ul.dpdown {
float: right;
position: relative;
z-index: 1000;
}
ul.dpdown li {
font-weight: bold;
float: left;
zoom: 1;
display: inline;
line-height: 20px;
list-style: none outside none;
margin-left: -25px;
}
ul.dpdown a:hover {
color: #EAD704;
}
ul.dpdown a:active {
color: #FFFFFF;
}
ul.dpdown li a {
color: #e8e8e8;
display: block;
padding-bottom: 4px;
text-align: center;
width: 150px;
}
ul.dpdown li:last-child a {
border-right: none;
} /* Doesn't work in IE */
ul.dpdown li.hover, ul.dpdown li:hover {
color: black;
position: relative;
}
ul.dpdown li.hover a {
color: white;
}
/*
LEVEL TWO
*/
ul.dpdown ul {
width: 150px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.dpdown ul li {
font-weight: normal;
background: #333;
color: #000;
float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dpdown ul li a {
background-color: #101010;
border-right: medium none;
display: inline-block;
margin-top: 2px;
padding: 10px 0;
width: 150px;
font-size: 13px;
color: #999999;
}
ul.dpdown ul li a:hover {
background-color: #222222;
}
/*
LEVEL THREE
*/
ul.dpdown ul ul {
left: 100%;
top: 0;
}
ul.dpdown li:hover > ul {
visibility: visible;
}
As always thank you very very much !
Here's a FIDDLE, I fixed your CSS a little.
Your HTML should look like this
<div class="l7menu">
<ul class="dpdown">
<li class="mainlist">Hombres
<ul class="sub_menu">
<li>Prueba</li>
<li>Here goes the sub-submenu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>