I have a navigation working fine in my website, but, we decided to put the logo in the middle of it and now I can't vertical align it, I tried using line-height but it did not make the trick.
I put the code in the snippet, can someone give me a hand?
nav > ul > li > a > img {
width: 60px;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-decoration: none;
color: black;
}
<nav>
<ul>
<li>Shop</li>
<li>Shop</li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo"/></li>
<li>Shop</li>
<li>Shop</li>
</ul>
</nav>
inline-block by default is vertical-align:baseline so set it to middle,
same rule to img, so if you don't want to apply to li you can apply to img instead
nav > ul > li > a > img {
width: 60px;
/*vertical-align:middle - this would work here by itself too */
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
vertical-align: middle
}
nav > ul > li > a {
text-decoration: none;
color: black;
}
<nav>
<ul>
<li>Shop
</li>
<li>Shop
</li>
<li>
<a href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo" />
</a>
</li>
<li>Shop
</li>
<li>Shop
</li>
</ul>
</nav>
Just vertically align the image, using the vertical-align property.
The value you want is most likely middle.
nav > ul > li > a > img {
width: 60px;
vertical-align:middle;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-decoration: none;
color: black;
}
<nav>
<ul>
<li>Shop</li>
<li>Shop</li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo"/></li>
<li>Shop</li>
<li>Shop</li>
</ul>
</nav>
Related
I have a simple menu made in html/css and the problem I encountered is that if I put my mouse pointer over menu item (test2) to expand submenu then other items from menu section (test1) change their positions: https://jsfiddle.net/dsb87pxz/
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
nav > ul > li {
display: inline-block;
}
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav > ul > li > ul > li {
display: block;
}
Can you suggest a solution for this problem?
With vertical-align: top
nav>ul>li {
display: inline-block;
vertical-align: top;
}
nav>ul>li>ul {
display: none;
}
nav>ul>li:hover>ul {
display: block;
}
nav>ul>li>ul>li {
display: block;
}
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
When you hover over a list item in the first level, it affects the list item on the right, because of display: inline-block.
Therefore one can use float: left and display: relative for <li> in the first level and display: absolute for the <ul> inside of the <li>.
Example
ul {
list-style: none;
padding: 0;
}
li {
padding: 2px 5px;
}
nav>ul>li {
float: left;
position: relative;
}
nav>ul>li>ul {
position: absolute;
left: 0;
display: none;
}
nav>ul>li:hover>ul {
display: block;
}
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
You could add position:absolute to your hover element like so
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
You could add position:absolute to your hover element like so
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
That's true you just need to add vertical-align as top to your inline-block elements which are li tags here.
display:inline-block by default aligns their block text to the baseline and that's why when user hover in above codes it aligns the text to the baseline i.e. vertical-align:baseline so change that to vertical-align:top.
nav > ul > li{
display: inline-block;
vertical-align:top; /*Just add this as already suggested*/
}
I am learning HTML5 and CSS. So my question is probably very basic and very naive. My apology for that.
To practice I am developing a header menu with drop down sub menu. The problem that I am experiencing is that even though I set up the display value of the sub-menu to block so that the sub-menu drops down vertically but now it drops horizontally.
html file :
<nav>
<ul>
<li>Home</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Woman</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>
<li>Contact Us</li>
</ul>
</nav>
here is the css code:
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover + ul li{
display: block;
}
nav ul li:hover{
background-color: #223433;
color:#f0f1f5;
}
I was wondering if some body could help me out what is wrong with my code? It is really appreciated.
The corrections are.
The issue was because the li tag were all float:left, this caused even the dropdown elements to be horizontal. So I created a class .dropdown to reset the float to none.
CSS:
.dropdown li {
float: none;
}
The dropdown ul tag, will still cause issues with the layout because you are not setting it to absolute position which will keep it separate from the navbar and show it as a floating (not CSS float) kind of element. Then the ul.dropdown needs to be placed inside the parent li element. This will allow us to position the absolute element according to the parent li element.
CSS:
nav ul li {
float: left;
position:relative;
width: 140px;
height: 40px;
line-height: 40px;
background: #fc575e;
}
.dropdown {
position: absolute;
top: 100%;
left: 0px;
padding-left:0px;
}
On hovering the a tags were also in black which made the label dissapear. I recommend adding the CSS below, which will set the a tag to white color, on hover alone.
CSS:
nav ul li:hover > a {
color: white;
}
Finally below is a working example of the code.
nav {
height: 40px;
width: 960px;
display: block;
margin: 0, auto;
text-align: center;
text-transform: uppercase;
}
nav a {
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
position: relative;
width: 140px;
height: 40px;
line-height: 40px;
background: #fc575e;
}
nav ul li ul li {
position: relative;
display: none;
}
nav ul li:hover>a {
color: white;
}
nav ul li:hover ul li {
display: block;
}
nav ul li:hover {
background-color: #223433;
color: #f0f1f5;
}
.dropdown {
position: absolute;
top: 100%;
left: 0px;
padding-left: 0px;
}
.dropdown li {
float: none;
}
<nav>
<ul>
<li>
Home
<ul class="dropdown">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>
Woman
<ul class="dropdown">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
1.Avoid the plus (+) sign in nav ul li:hover + ul li{display: block;} style.
2.Add one more style nav ul li ul {padding-left: 0px;}
3.li tag of Home and Woman close after dropdown list items. i.e,
<li>Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
Corrupted code:
<html>
<head>
<style>
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover ul li{
display: block;
}
nav ul li:hover{
background-color: #e3b0b2;
color:#f0f1f5;
}
nav ul li ul{
padding-left: 0px;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>Woman
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
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;
}
I haven't done this in a long time and I looked it up aswell but when I hover over an li I expect its child UL to open up (display), but it isn't:
<nav>
<ul>
<li>Products <img src="~/Shared/Assets/Images/LIItemArrow.png" />
<ul>
<li>Hi</li>
</ul>
</li>
<li>Services <img src="~/Shared/Assets/Images/LIItemArrow.png" /></li>
<li>Shop <img src="~/Shared/Assets/Images/LIItemArrow.png" /></li>
</ul>
</nav>
CSS:
ul li ul { display: none; }
ul li:hover > ul {
display: block;
}
According to the several articles I looked up, I believe that I'm doing this right, so why won't this work?
Add height: auto, so your code would become
ul li ul { display: none; }
ul li:hover > ul {
display: block;
height: auto;
}
I had similar problems while I was creating menu.
I have a menu like this
<nav id="nav">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</nav>
My CSS file is like this
#nav ul li {
display: inline;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
position: absolute;
}
#nav ul ul li {
display: block;
}
The sub-menu items drop down and look just fine, it's just that they're dropping down under the first list item, Home.
How can I get them to drop down under the parent list item they're under?
Here is a fiddle with a working solution: http://jsbin.com/akazev/2/edit
Have a look at the new CSS:
nav ul li {
display: block;
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
margin-left: -30px;
}
nav ul ul li {
display: block;
float: none;
}
Instead of displaying your first-level links as inline, display them either as inline-block or float. That was what bugged the nav. If you use float (like I did), don't forget to set the deeper level links to float: none. You will also have to set a margin-left for the absolutely positioned ul's.
PS: Isn't <nav id="nav"> a bit pointless?
Try this
<html>
<head>
<style type="text/css">
#nav ul li {
float:left;
}
#nav ul ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position:absolute;
}
#nav ul ul li {
display: block;
border:1px #ccc solid;
padding:2px;
float:none;
}
</style>
</head>
<body>
<dev id="nav">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</dev>
</body>
</html>
Here you are mate just update your code to
#nav ul li {
display: inline;
}
#nav li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul ul li {
display: block;
}
http://jsfiddle.net/dPgQN/ <--- this is a live preview
Try this..
HTML Code:
<div id="navMenu">
<ul>
<li>Home</li>
<li>Menu1
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</div>
CSS:
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:5px;
list-style:none;
float:left;
position:relative;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
}
#navMenu ul li:hover ul{
right: auto;
left: 0;
visibility:visible
}
I hope this is useful for you.,