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.
Related
I've tried to do a dropdown menu but the nav ul li:hover > ul doesn't word and I don't know why please help
css
<body>
<header>
<!-- menu -->
<nav id="nav">
<li class="dropdown">Chapters</li>
<ul>
<li>chapter.1</li>
<li>chapter.2</li>
</ul>
</li>
</nav>
</header>
</body>
html
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover > ul {
display: inherit;
}
Your HTML is invalid, li MUST be the direct child of a ul. Your first li is not in a ul`.
Secondly, your submenu should be inside the li, not after it
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover>ul {
display: inherit;
}
<header>
<!-- menu -->
<nav id="nav">
<ul>
<li class="dropdown">Chapters
<ul>
<li>chapter.1</li>
<li>chapter.2</li>
</ul>
</li>
</ul>
</nav>
</header>
I fixed it for you. Your CSS selector was wrong. See updated answer.
Also,
li should only be used inside either ul or ol, so fix this in your HTML code.
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover + ul {
display: inherit;
}
<body>
<header>
<!-- menu -->
<nav id="nav">
<ul>
<li class="dropdown">Chapters</li>
<ul>
<li>chapter.1</li>
<li>chapter.2</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
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 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>
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.,
How can I make the submenus "PROGRAMMATION" and "RÉSEAUTIQUE" visible when the mouse is hovering over the link of the parent "MON PROGRAMME"?
This is the html code:
<div class="menu">
<ul>
<li>ACCUEIL</li>
<div class="sousMenu">
<li><a>MON PROGRAMME</a>
<ul>
<li>PROGRAMMATION</li>
<li>RÉSEAUTIQUE</li>
</ul>
</li>
</div>
<li>MON COLLÈGE</li>
<li>À PROPOS</li>
</ul>
</div>
And here is my CSS code:
.sousMenu:hover li a > li ul li
{
display: block;
}
.sousMenu li ul li
{
position: absolute;
top: 40px;
display: none;
list-style-type: none;
}
Change your HTML to this:
<div class="menu">
<ul>
<li>ACCUEIL</li>
<li class="sousMenu"><a>MON PROGRAMME</a>
<ul>
<li>PROGRAMMATION</li>
<li>RÉSEAUTIQUE</li>
</ul>
</li>
<li>MON COLLÈGE</li>
<li>À PROPOS</li>
</ul>
</div>
And your css to this:
.sousMenu:hover ul {
display: block;
}
.sousMenu ul {
top: 40px;
display: none;
list-style-type: none;
}
You can see it works here: http://jsfiddle.net/AuJeF/