In my HTML doc I have a nested list with style:
li {
list-style-type:none;
border:1px solid;
margin:3px;
}
li li {
list-style:none;
}
<ul>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
</ul>
With my current CSS rule borders looks like this:
I want them to look like this, but without inserting <span> tags:
Any ideas?
Maybe something like that:
li {
clear: both;
width: 200px;
list-style-type:none;
border:1px solid;
margin:3px;
}
li ul{
float: left;
}
<ul>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
</ul>
The result:
Related
CSS
#nav > li {
list-style:none;
letter-spacing:3px;
}
<ul id="nav">
<li>Home</li>
<li>About US</li>
<li>Services
<ul>
<li>Web Development</li>
<li>Mobile Development</li>
<li>Consultancy</li>
</ul>
</li>
</ul>
I am using child selector to make the list style none, which only unstyles children list items. But, letter-spacing property is adding spacing to the grandchildren list items. It is confusing me.
The default behaviour of letter-spacing, text-* and font-* are to inherit from the parent. So you have reset on your children:
#nav > li {
list-style: none;
letter-spacing: 3px;
}
#nav > li li {
letter-spacing: normal;
}
<ul id="nav">
<li>Home</li>
<li>About US</li>
<li>Services
<ul>
<li>Web Development</li>
<li>Mobile Development</li>
<li>Consultancy</li>
</ul>
</li>
</ul>
#nav > li {
list-style:none;
letter-spacing:3px;
ul{
list-style:none;
letter-spacing:0;
}
}
or
#nav > li {
list-style:none;
letter-spacing:3px;
ul{
li{
list-style:none;
letter-spacing:0;
}
}
}
To achieve this layout of a fully justified menu list, I can not use CSS pseudo-classes to display separators between list items; instead, I have to put the separator directly in the HTML.
Since according to HTML5 standard in an <ul> only <li> and script-supporting elements are allowed, I made the below code. It is valid HTML5 but it seems quirky to me. Any concerns?
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
li.home {
padding: 0;
}
li,
script::after {
vertical-align: middle;
padding-top: 10px;
}
nav {
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 40px;
}
script.separator {
display: block;
}
script.separator::after {
content: "*";
}
<nav id="main-menu">
<ul>
<li class="home">
<img src="http://dummyimage.com/40x40/000/fff">
</li>
<script class="separator"></script>
<li class="second">Item 1</li>
<script class="separator"></script>
<li>Item 2</li>
<script class="separator"></script>
<li>One more Item</li>
<script class="separator"></script>
<li>Another Item</li>
<script class="separator"></script>
<li class="last">Contact</li>
</ul>
</nav>
Replace the <script> with another <li> and simply assign a style to it with
ul li:nth-of-type(even) {
display: block;
content: "*";
vertical-align: middle;
padding-top: 10px;
}
This will have the same effect but will look much neater on the code view.
<nav id="main-menu">
<ul>
<li class="home">
<img src="http://dummyimage.com/40x40/000/fff">
</li>
<li></li>
<li class="second">Item 1</li>
<li></li>
<li>Item 2</li>
<li></li>
<li>One more Item</li>
<li></li>
<li>Another Item</li>
<li></li>
<li class="last">Contact</li>
</ul>
</nav>
You may have to tweak the actual CSS in the rule above to suit your look and feel but as a concept I think it's neater and cleaner to have all <li> elements and then use CSS to intelligently select all of the correct ones. This also reduces the number of class=" ... " laying around too.
You can also potentially add further rules so that for example you do not do the seperator CSS on the last of type, so the final li would never be the seperator either:
ul li:nth-of-type(even), ul li :not(:last-of-type) {
display: block;
content: "*";
vertical-align: middle;
padding-top: 10px;
}
I'm not sure this is the exact layout you're after, but can you not use display: table and a border?
ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
width: 100%;
}
li {
display: table-cell;
text-align: center;
}
li:not(:last-child) {
border-right: 1px solid #333;
}
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
I have this list, and I have tried a bunch of css that I think is making my html display incorrectly. I am trying to get the .submenu list items to show on hover and hide when they are not highlighted.
http://jsfiddle.net/marcuccione/Lwjsry4h/
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Fly Hays</title>
<--<link rel="stylesheet" type="text/css" href="navbarsnippet.css"> -->
<style>
*{
font-family:Helvetica, Arial, Tahoma, Verdana, sans-serif;
padding:0;
margin:0;
}
.clearfix:after {
display:block;
clear:both;
}
nav {
height:50px;
margin:0px auto;
background-color:#2E2728;
}
nav ul{
height:50px;
width:750px;
margin:0 auto;
font-weight:bold;
}
nav ul li {
margin:0px;
list-style-type:none;
width:150px;
float:left;
}
nav ul li .submenu{
}
nav ul li .submenu a, li a{
text-decoration:none;
color:white;
line-height:50px;
display:block;
text-align:center;
}
nav a {
transition:all linear 0.15s;
}
.submenu a:hover, li a:hover{
background-color:#c0c0c0;
color:#830300;
z-index:1;
opacity:1;
}
.submenu{
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
position:absolute;
}
.submenu li a {
padding:10px 30px;
display:block;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Flights
<ul class="submenu">
<li>Book a Flight</li>
<li>Check Flight Status</li>
<li>View Timetable</li>
<li>TSA Guidelines</li>
<li>Denver Airport Map</li>
<li>Directions to the Airport</li>
</ul>
</li>
<li>Visitors
<ul class="submenu">
<li>Places to Eat</li>
<li>Things to See</li>
<li>Where to Stay</li>
</ul>
</li>
<li>General Aviation
<ul class="submenu">
<li>Field Condition Report</li>
<li>Airport Information</li>
<li>Prior Permission Request</li>
<li>Businesses at the Airport</li>
</ul>
</li>
<li>Transportation
<ul class="submenu">
<li></li>
</ul>
</li>
<li>About Us
<ul class="submenu">
<li>FAQ's</li>
<li>Events</li>
<li>Media Gallery</li>
<li>Public Notices</li>
<li>History</li>
<li>Rent the Conference Room</li>
<li></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I changed a few things around, added some javascript and changed the opacity on submenu in css. Here is the working jsfiddle version
$(document).ready(function(){
$('#flight').hover(function(){
$('#flightsub').fadeTo('fast', 1);
});
});
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 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