I've searched around and found a lot of questions about this problem, but none of the answers I tried seemed to work in my case. So I have a unordered list inside of the nav tag and I want the list to be centered relative to the parent nav tag. But the list is always a bit to the right and never in the center no matter what I tried.
HTML pretty straight forward:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
Here is the CSS so far:
nav {
float: left;
width:15%;
margin: 0;
padding:0;
background:gray;
text-align:center;
}
nav ul {
list-style-type: none;
color:blue;
}
Any ideas how can I get this to work?
try this
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
this is because ul have a padding and margin applied to it by browsers by default you need to remove them
nav {
float: left;
width: 50%;
margin: 0;
padding: 0;
background: gray;
text-align: center;
}
nav ul {
list-style-type: none;
color: blue;
margin: 0;
padding: 0;
}
<nav>
<ul>
<li>MENU</li>
<li>Opt 1
</li>
<li>Opt 2
</li>
<li>Opt 3
</li>
</ul>
</nav>
Test this:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
nav {
display:table;
margin:0 auto;
padding : 10px;
}
Related
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 am trying to write a website with a toolbar at the top, the HTML for the toolbar is:
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
display: inline;
}
<ul>
<li>Home </li>
<li><p>|</p></li>
<li> About Us </li>
<li><p>|</p></li>
<li> Contact Us</li>
</ul>
Any help you could give would be really apreciated!
You can use display: inline-block instead of display: inline
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
}
<ul>
<li>Home </li>
<li> <p>|</p> </li>
<li> About Us </li>
<li><p>|</p></li>
<li> Contact Us</li>
</ul>
Here is better option to do this with Flexbox and :after pseudo-element
ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
li:not(:last-child):after {
content: '|';
margin: 0 5px;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
Remove these:
<li><p>|</p></li>
Because:
Paragraph elements are blocks (and generate line breaks)
Dividing characters are not paragraphs
Dividing characters are not list items
Use CSS borders if you want a line between list items.
I am working on getting my CSS Menu setup, I have followed some tutorials but got myself stuck after hiding some secondary menu items. I just want the items to show up right below their parents. (Not to the side like most tutorials I've seen)
My code is here
http://codepen.io/anon/pen/pJMdqv
HTML
<nav>
<ul>
<li>Home</li>
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
<li>Dictionary</li>
<ul>
<li>Phrases</li>
<li>Onomatopoeia</li>
</ul>
<li>Sentences</li>
<ul>
<li>Beginner</li>
<li>Intermediate</li>
<li>Advanced</li>
</ul>
</ul>
</nav>
CSS
nav {
width: 180px;
margin-top: 15px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
}
nav a {
color: 101010;
padding: 12px 0px;
display: block;
text-decoration: none;
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
background: #ececec;
}
nav ul ul {
display: none;
}
nav ul li:hover ul {
display: block;
}
Your nesting is off. Instead of:
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
You need to include your submenu ul within the parent li that gets hovered over:
<li>
Lessons
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
</li>
I found a lot of posts about centering submenu <ul> absolute positioned, but none of them solved the problem of center the submenu that have dynamic width determined by the text length of the <li> children...
Most of those posts offer a solution based on the use of negative margin-left,
and this means that it can work only for a specific width, but not for dynamic width!
So I have prepared a quick FIDDLE HERE with a very basic menu,
please can you help me to figure out how is possible to automatically center submenus?
nav {
background-color: red;
}
ul {
background-color: rgb(88, 164, 228);
padding: 0;
margin: 0;
list-style-type: none;
}
li {
display: inline-block;
margin: 0 20px;
}
ul ul {
background: rgb(119, 193, 255);
position: absolute;
outline: 1px solid black;
}
ul ul li {
margin: 0;
display: block;
}
<nav>
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>aa aa aa aa</li>
<li>bb bb</li>
</ul>
</li>
<li>Menu
<ul>
<li>cc cc cc</li>
<li>dd dd dd dd dd</li>
<li>ee ee ee</li>
</ul>
</li>
<li>Menu
<ul>
<li>ff ff</li>
<li>gg gg</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
I am making a horizontal menu and sub menu (level 2) inside a wrapper. Please imagine this menu is on the top right of the page / wrapper. The problem is, since the sub menu is also horizontal it can (will) be too wide and will overflow outside the wrapper.
Here it is:
http://jsfiddle.net/5DWer/
There is "menu-wrapper" there, but it is not the wrapper I was referring above.
The wrapper is right after "Tab 3" so "Tab 3 sub 2" is outside the wrapper.
I think the solution is to have the second level menu to start at the same point below the first level so it will never flow outside the wrapper (assuming the first level is wide enough). In the fiddle link: "tab 3 sub 1" starts right below "tab 1". I can't just use margin-left or left because I don't know under which tab the sub menu will start.
Is this possible or is there other solution? If possible in pure CSS, but I'll take Javascript if it isn't.
Thanks in advance :)
Thanks for the explanation. Sorry, here is the code:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
</ul>
</ul>
</div>
and the CSS
.menu-wrapper {
width: 100%;
}
.menu {
max-width: 450px;
float: right;
}
.menu li a,
.menu li {
display: inline-block;
text-decoration: none;
}
.menu li:hover > ul {
display: block;
}
.menu li ul {
display: none;
width: 404px;
position: absolute;
}
.menu li li{
width: 200px;
margin: 0;
}
.menu li ul ul {
top: 100%;
left: 50%;
width: 200px;
}
.menu ul li:hover > ul {
border-left: 0;
display: block;
}
.menu li ul li a {
display: block;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
here is the solution to your problem: (I added a 3rd subtab to show it works)
http://jsfiddle.net/5DWer/3/
However, like I mentioned in the fiddle as comment:
You have to manually specify the width of the second-level ul.
Also, you have to nest your second level properly, like this:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
</ul>
</li>
</ul>
</div>
and not outside the li.
For reference (jsfiddle code):
HTML:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
<li>tab 3 sub 3</li>
</ul>
</li>
</ul>
</div>
And CSS:
.menu-wrapper {
width: 100%;
}
.menu {
max-width: 450px;
float: right;
}
.menu li {
display: inline-block;
text-decoration: none;
font-family: Arial, sans-serif;
background-color: yellow;
width: 50px;
height: 20px;
text-align: center;
}
.menu li ul {
display: none;
width: 500px; /* caveat : you have to specify the width manually */
margin-top: 10px;
}
.menu li:hover ul {
display: block;
float: right;
}
.menu li ul li {
float: right;
background-color: orange;
height: 100%;
}
.menu li ul li a {
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
Looking at your code, it seems to be operating as expected. It seems to me, from what I can see (given the float:right for example) that this is more of a ui/design problem than a code problem. If not, maybe you can provide further details on your actual design so I can provide a css solution.