I am trying to build a CSS menu with dropdowns,something like:
MENU1 MENU2 MENU3
Item1 Item1 Item1
Item2 Item2 Item2
Item3 Item3
Item4
The Menus bar is a UL with further li and sub ULs for menu dropdowns. I have wrote the CSS and the dropdown occurs on Menu hover but as soon as I try to go through the dropdown list the menu disappears. Obviously because I have set the css hover property on Menu hover. I am trying to use only CSS. Can you direct me what should I do to keep the menu dropdown visible while I go through the dropdown items?
Here is my css:
#menuNav{width:100%; position:relative; height:28px; list-style:none;}
#menuNav li{float:left; position:relative;} //MENU1, MENU2, MENU3
#menuNav li ul{position:absolute; visibility:hidden; width:100px;} //Each Dropdown is a UL
#menuNav a{display:block;}
#menuNav li:hover ul, #menuNav a:hover ul{visibility:visible;} //Show dropdown on MENU hover
CSSPlay has a variety of menu examples.
You might find something you can use as a template.
CSS
<style>
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#3A4956;
}
#navMenu ul li a{
text-align:center;
color:black;
text-decoration:none;
font-family:"Comic Sans MS";
height:30px;
width:150px;
display:block;
border-bottom:1px black solid;
}
#navMenu ul li a:hover{
color:white;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
}
#navMenu ul li:hover ul{
visibility:visible
}
#wrapper1{
border-radius:8px 0 0 0;
border-right:1px black solid
}
#wrapper4{
border-radius:0 8px 0 0;
}
</style>
HTML
<div id="wrapper">
<div id="navMenu">
<ul style="height: 30px; width: 308px">
<li id="wrapper1" style="left: 0px; top: 0px; width: 150px; height: 31px"><a style="color:black" href="#">Products</a>
<ul>
<li id="wrapper3">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</li>
<li id="wrapper4"><a style="color:black" href="#">Products</a>
<ul>
<li id="wrapper3">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</li>
</ul>
</div>
</div>
Related
CSS hover li tag inside the first ul select, Not select the first ul inside ul tag.
For example below the code.
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
<ul>
<li> ( hover this li)
Dropdown Link
<ul> ( Select this ul only )
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3
<ul> ( not select this ul )
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
</li>
</ul>
Your Answer is :
<ul>
<li class="link1"> ( hover this li)
<a href="#" >Dropdown Link</a>
<ul class="first-ul"> ( Select this ul only )
<li>Link 1</li>
<li>Link 2</li>
<li class="link2"><a href="#" >Link 3</a>
<ul class="second-ul" > ( not select this ul )
<li>Link 1</li>
<li>Link 2</li>
<li><a href="#" >Link 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.link1:hover .first-ul{display: block;}
.first-ul {
position: absolute;
width: 200px;
display: none;
}
.link2:hover .second-ul{display: block;}
.second-ul {
position: absolute;
width: 200px;
display: none;
}
.second-ul, .first-ul {
background: #555;
display: none;
}
.secondUL{display:none}
View Code in Codepen: Open
I would like to horizontally center the menu. It could be done by assigning margin-left for #navigation, but the main items can increase and also the screen size.
Tried changing ul#navigation {float:left;} to
ul#navigation {position:absolute;left:0;right:0;margin:0 auto;}, but did not work.
http://jsfiddle.net/RLtkq/
HTML:
<div class="menu">
<center>
<ul id="navigation">
<li class="dropdown">
Dropdown
<ul class="sub_navigation">
<li>Sub Navigation 1</li>
<li>Sub Navigation 2</li>
<li>Sub Navigation 3</li>
</ul>
</li>
<li class="dropdown">Dropdown
<ul class="sub_navigation">
<li>Sub Navigation 1</li>
<li>Sub Navigation 2</li>
<li>Sub Navigation 3</li>
</ul>
</li>
</ul>
</center>
</div>
CSS:
ul {
margin:0;
padding:0;
list-style-type:none;
min-width:200px;
}
ul#navigation {
float:left;
}
ul#navigation li {
float:left;
border:1px black solid;
min-width:200px;
}
ul.sub_navigation {
position:absolute;
display:none;
}
ul.sub_navigation li {
clear:both;
}
a,a:active,a:visited {
display:block;
padding:10px;
}
See the updated the fiddle here.
Changes are here
ul#navigation {
float:left;
width: 100%;
}
ul#navigation li {
border:1px black solid;
min-width:200px;
display: inline-block; /* replaced float:left; */
}
Changing the display of the #navigation's lis to inline-block seems to solve the issue:
JSFiddle
You get a gap on the right-hand-side, though. This can be eliminated with negative margins.
I have an unsorted list which I want do display in a tile-like style using CSS.
This is my list:
<ul>
<li>Area 1</li>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
<li>Area 2</li>
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</ul>
This is the needed Output:
Unfortunately I cannot post images here (due to my low reputation).
+---------------------------+
| Area 1 |
+---------------------------+
+-------+ +-------+ +-------+
|Topic 1| |Topic 2| |Topic 3|
+-------+ +-------+ +-------+
+-------+
|Topic 4|
+-------+
+---------------------------+
| Area 2 |
+---------------------------+
+-------+ +-------+
|Topic 5| |Topic 6|
+-------+ +-------+
In a first step it would be enough if the list is only these 2 steps deep.
I checked several approaches using CSS, but failed.
Can someone help me please with the solution or an approach?
Best regards,
Stefan
- LIVE DEMO
- RESPONSIVE
Corrected HTML:
<ul>
<li><span>Area 1</span>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
</li>
<li><span>Area 2</span>
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</li>
</ul>
CSS:
ul{
width:300px;
list-style:none;
padding:0;
text-align:center;
overflow:auto;
}
ul > li{
margin-bottom:15px;
}
li span{
display:block;
clear:both;
background:#5A9BD5;
padding:15px 0;
}
ul ul li{
float:left;
width:90px;
margin:15px 15px 0 0;
}
ul ul li:nth-child(3){
margin-right:0;
}
ul li a{
background:#5A9BD5;
display:block;
width:100%;
padding:15px 0;
}
There's a few approaches you could take. One is to use floats, like so:
ul li {
clear: left;
}
ul li ul li {
clear: none;
float: left;
width: 33.33%;
}
Another is display: inline-block. But note you'd need to remove any whitespace and line breaks from between the list items (in the HTML):
ul li li {
display: inline-block;
width: 33.33%;
}
Note IE7 doesn't do inline-block. To make it work there (if necessary) add this:
.ie7 ul li li {
display: inline;
zoom: 1;
}
(I use conditional commments to add the .ie7 class to the HTML element)
First thing. You cannot have a <ul> directly under a parent <ul>.
<ul>
<li>Area 1</li>
<!-- this is wrong -->
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
<li>Area 2</li>
<!-- this is wrong -->
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</ul>
So you can change the markup this way:
<ul>
<li>Area 1</li>
<li class="tiles">
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
</li>
<li>Area 2</li>
<li class="tiles">
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</li>
</ul>
Now the CSS:
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul {background: #fff;}
li {line-height: 50px; width: 100%; text-align: center; background: #66f; margin: 5px;}
li.tiles ul li {width: 33%; float: left; margin: 5px 0; background: none;}
li.tiles ul {overflow: hidden;}
li.tiles {text-align: left; margin: 0;}
a {color: #fff; text-decoration: none; display: block; background: #66f; margin: 5px;}
Fiddle: http://jsfiddle.net/praveenscience/LjCHW/1/
Without the use of class attribute.
HTML
<ul>
<li>Area 1</li>
<li>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
</li>
<li>Area 2</li>
<li>
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</li>
</ul>
CSS
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul {background: #fff;}
li {line-height: 50px; width: 100%; text-align: center; background: #66f; margin: 5px;}
li ul li {width: 33%; float: left; margin: 5px 0; background: none;}
li ul {overflow: hidden;}
a {color: #fff; text-decoration: none; display: block; background: #66f; margin: 5px;}
Fiddle: http://jsfiddle.net/praveenscience/LjCHW/2/
I have created a vertical navigational menu in css with two sub-menus.
But I can't figure out how to position them in one column so that they work properly.
Is this possible?
html
<ul>
<li>works
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>photos
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>friends</li>
<li>contact</li>
</ul>
</div></html>
css
#menu {
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
#menu ul {
margin: 0px;
list-style-type: none;
}
#menu ul li {
position: relative;
}
#menu ul li a {
line-height: normal;
color: #000;
text-decoration: none;
}
#menu ul li ul {
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
z-index: 99999;
width: 180px;
}
#menu ul li ul li {
min-width: 180px;
}
#menu ul li ul ul {
float: left;
top: 0px;
}
#menu ul li:hover > ul { display:block;
}
First of all your html structure is messy. the clean structure could be something like this:
<div id="menu">
<ul>
<li>
works
<li>
works subcategory
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</li>
<li>something</li>
<li>something</li>
<li>
photos
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>friends</li>
<li>contact</li>
</ul>
</div>
You had mistakes in closing tags,..
And i suggest you to use css resets while making dropdown menus. because user-agent predefined styles get you in trouble (try Normalize.css)
In CSS: you don't need to float the 2nd-level ul blocks and also setting list items position property to relative and using top and left properties for children ul is not a good solution.
I styled your menu a little bit and it looks fine. you can view it here: http://codepen.io/anon/pen/sdomr
I am trying to create a drop down menu using CSS and HTML, it is working fine but the problem is the sub menu items does not show the full texts. For example: If I hover on the link-1 the sub menu items shows up but I can only see first few of the texts from the sub menu items.
I want to increase the width of ul of the submenu items and see the full texts.
Would you please kindly show me how to do it?
Here's my COde:
HTML:
<div id="menu">
<ul>
<li>Link 1
<ul>
<li>ABC INFORMATION SYSTEM</li>
<li>ABC INFORMATION SYSTEM</li>
<li>ABC INFORMATION SYSTEM</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Link 3
<ul>
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
</ul>
</div>
CSS
#menu{
text-align:left;
top:90px;
margin-left:230px;
position:absolute;
z-index:100;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menu li a{
width:135px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: #A7C66B;
color: white;
}
#menu li a:hover{
background-color: red;
}
#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
to increase the size of the submenus add the following to your css:
#menu ul ul li a{
width:335px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: #A7C66B;
color: white;
}
In #menu li a make the width higher or put no width at all.
If you put no width at all, then it adjusts itself to the width of the text.